diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 1933fe66c..f29141e0b 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -214,22 +214,29 @@ RED.editor = (function() { if (input.length === 0 ) { return; } - var existingWidthCSS = input[0].style.width; - var newWidth; - if (existingWidthCSS !== '') { - if (/%/.test(existingWidthCSS)) { - newWidth = (input.width()-10)+"%"; - } else { - newWidth = input.width()-50; - } + var newWidth = input.width(); + var attrStyle = input.attr('style'); + var m; + if ((m = /width\s*:\s*(\d+(%|[a-z]+))/i.exec(attrStyle)) !== null) { + newWidth = m[1]; } else { - newWidth = "60%"; + newWidth = "70%"; } - var select = $(''); - select.width(newWidth); - input.replaceWith(select); + var outerWrap = $("
").css({display:'inline-block',position:'relative'}); + var selectWrap = $("
").css({position:'absolute',left:0,right:'40px'}).appendTo(outerWrap); + var select = $('').appendTo(selectWrap); + + outerWrap.width(newWidth).height(input.height()); + if (outerWrap.width() === 0) { + outerWrap.width("70%"); + } + input.replaceWith(outerWrap); + // set the style attr directly - using width() on FF causes a value of 114%... + select.attr('style',"width:100%"); updateConfigNodeSelect(property,type,node[property],prefix); - select.after(' '); + $('') + .css({position:'absolute',right:0,top:0}) + .appendTo(outerWrap); $('#'+prefix+'-lookup-'+property).click(function(e) { showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix); e.preventDefault(); diff --git a/editor/js/ui/typedInput.js b/editor/js/ui/typedInput.js index 36be34b3d..49cee9464 100644 --- a/editor/js/ui/typedInput.js +++ b/editor/js/ui/typedInput.js @@ -112,11 +112,18 @@ this.disarmClick = false; this.element.addClass('red-ui-typedInput'); - this.uiWidth = this.element.width(); - this.uiSelect = this.element - .wrap( "
" ) - .parent(); - + this.uiWidth = this.element.outerWidth(); + this.elementDiv = this.element.wrap("
").parent().addClass('red-ui-typedInput-input'); + this.uiSelect = this.elementDiv.wrap( "
" ).parent(); + var attrStyle = this.element.attr('style'); + var m; + if ((m = /width\s*:\s*(\d+%)/i.exec(attrStyle)) !== null) { + this.element.css('width','100%'); + this.uiSelect.width(m[1]); + this.uiWidth = null; + } else { + this.uiSelect.width(this.uiWidth); + } ["Right","Left"].forEach(function(d) { var m = that.element.css("margin"+d); that.uiSelect.css("margin"+d,m); @@ -242,33 +249,31 @@ }); }, _getLabelWidth: function(label) { - var labelWidth = label.width(); + var labelWidth = label.outerWidth(); if (labelWidth === 0) { - var newTrigger = label.clone(); - newTrigger.css({ + var container = $('
').css({ position:"absolute", top:0, left:-1000 }).appendTo(document.body); - labelWidth = newTrigger.width()+4; - newTrigger.remove(); + var newTrigger = label.clone().appendTo(container);; + labelWidth = newTrigger.outerWidth(); + container.remove(); } return labelWidth; }, _resize: function() { + if (this.uiWidth !== null) { + this.uiSelect.width(this.uiWidth); + } if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) { - this.selectTrigger.width(this.uiWidth+5); + this.selectTrigger.css('width',"100%"); } else { this.selectTrigger.width('auto'); var labelWidth = this._getLabelWidth(this.selectTrigger); - - var newWidth = this.uiWidth-labelWidth+4; - this.element.width(newWidth); - + this.elementDiv.css('left',labelWidth+"px"); if (this.optionSelectTrigger) { - var triggerWidth = this._getLabelWidth(this.optionSelectTrigger); - labelWidth = this._getLabelWidth(this.optionSelectLabel)-4; - this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth)); + this.optionSelectTrigger.css('left',(labelWidth+5)+"px"); } } }, @@ -338,7 +343,7 @@ if (opt.options) { if (this.optionSelectTrigger) { this.optionSelectTrigger.show(); - this.element.hide(); + this.elementDiv.hide(); this.optionMenu = this._createMenu(opt.options,function(v){ that.optionSelectLabel.text(v); that.value(v); @@ -361,13 +366,13 @@ if (opt.hasValue === false) { this.oldValue = this.element.val(); this.element.val(""); - this.element.hide(); + this.elementDiv.hide(); } else { if (this.oldValue !== undefined) { this.element.val(this.oldValue); delete this.oldValue; } - this.element.show(); + this.elementDiv.show(); } this.element.trigger('change',this.propertyType,this.value()); } @@ -400,6 +405,13 @@ this.uiSelect.addClass('input-error'); } return result; + }, + show: function() { + this.uiSelect.show(); + this._resize(); + }, + hide: function() { + this.uiSelect.hide(); } }); })(jQuery); diff --git a/editor/sass/forms.scss b/editor/sass/forms.scss index 20322d0ee..442c516a2 100644 --- a/editor/sass/forms.scss +++ b/editor/sass/forms.scss @@ -147,8 +147,9 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { + box-sizing: border-box; display: inline-block; - height: 20px; + height: 34px; padding: 6px 6px; margin-bottom: 10px; font-size: 14px; diff --git a/editor/sass/typedInput.scss b/editor/sass/typedInput.scss index 13063a744..b2cbcdfde 100644 --- a/editor/sass/typedInput.scss +++ b/editor/sass/typedInput.scss @@ -24,8 +24,17 @@ vertical-align: middle; box-sizing: border-box; overflow:hidden; - + position: relative; + .red-ui-typedInput-input { + position: absolute; + left:0; + right:0; + top:0; + bottom:0; + outline: red; + } input { + width: 100%; padding: 0 0 0 1px; margin:0; height: 32px; @@ -41,6 +50,7 @@ } a { + box-sizing: border-box; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 1px 0 5px; @@ -72,6 +82,10 @@ &:not(.disabled):hover { text-decoration: none; background: $typedInput-button-background-hover; + + span { + background: $typedInput-button-background-hover; + } } &:focus { text-decoration: none; @@ -88,13 +102,22 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding: 0 5px 0 0; + position:absolute; + left:0; + top:0; + bottom:0; + right:0; i { - margin-right: 0; - margin-left: 4px; + position:absolute; + right: 4px; + top: 7px; } span { background:#fff; + position:absolute; + left:0; + right:23px; padding: 0 5px 0 5px; } } diff --git a/nodes/core/core/20-inject.html b/nodes/core/core/20-inject.html index cebebf376..d1fcd104e 100644 --- a/nodes/core/core/20-inject.html +++ b/nodes/core/core/20-inject.html @@ -17,18 +17,18 @@ diff --git a/nodes/core/parsers/70-XML.html b/nodes/core/parsers/70-XML.html index 133201bc6..bfbdfa4d4 100644 --- a/nodes/core/parsers/70-XML.html +++ b/nodes/core/parsers/70-XML.html @@ -17,16 +17,16 @@