diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index 0ef5b2102..daef61f64 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -439,21 +439,27 @@ }) }); }, - _getLabelWidth: function(label) { + _getLabelWidth: function(label, done) { var labelWidth = label.outerWidth(); if (labelWidth === 0) { - var container = $('
').css({ + var wrapper = $('
').css({ position:"absolute", "white-space": "nowrap", - top:0 + top:-2000 }).appendTo(document.body); + var container = $('
').appendTo(wrapper); var newTrigger = label.clone().appendTo(container); - labelWidth = newTrigger.outerWidth(); - container.remove(); + setTimeout(function() { + labelWidth = newTrigger.outerWidth(); + wrapper.remove(); + done(labelWidth); + },50) + } else { + done(labelWidth); } - return labelWidth; }, _resize: function() { + var that = this; if (this.uiWidth !== null) { this.uiSelect.width(this.uiWidth); } @@ -462,47 +468,44 @@ this.selectTrigger.addClass("red-ui-typedInput-full-width"); } else { this.selectTrigger.removeClass("red-ui-typedInput-full-width"); - var labelWidth = this._getLabelWidth(this.selectTrigger); - this.elementDiv.css('left',labelWidth+"px"); - this.valueLabelContainer.css('left',labelWidth+"px"); - if (this.optionExpandButton.is(":visible")) { - this.elementDiv.css('right',"22px"); - this.valueLabelContainer.css('right',"22px"); - } else { - this.elementDiv.css('right','0'); - this.valueLabelContainer.css('right','0'); - this.input.css({ - 'border-top-right-radius': '4px', - 'border-bottom-right-radius': '4px' - }); - } - - // if (this.optionSelectTrigger) { - // this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'}); - // } - - if (this.optionSelectTrigger) { - if (type && type.options && type.hasValue === true) { - this.optionSelectLabel.css({'left':'auto'}) - var lw = this._getLabelWidth(this.optionSelectLabel); - this.optionSelectTrigger.css({'width':(23+lw)+"px"}); - this.elementDiv.css('right',(23+lw)+"px"); - this.input.css({ - 'border-top-right-radius': 0, - 'border-bottom-right-radius': 0 - }); + this._getLabelWidth(this.selectTrigger, function(labelWidth) { + that.elementDiv.css('left',labelWidth+"px"); + that.valueLabelContainer.css('left',labelWidth+"px"); + if (that.optionExpandButton.is(":visible")) { + that.elementDiv.css('right',"22px"); + that.valueLabelContainer.css('right',"22px"); } else { - this.optionSelectLabel.css({'left':'0'}) - this.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'}); - if (!this.optionExpandButton.is(":visible")) { - this.elementDiv.css({'right':0}); - this.input.css({ - 'border-top-right-radius': '4px', - 'border-bottom-right-radius': '4px' + that.elementDiv.css('right','0'); + that.valueLabelContainer.css('right','0'); + that.input.css({ + 'border-top-right-radius': '4px', + 'border-bottom-right-radius': '4px' + }); + } + if (that.optionSelectTrigger) { + if (type && type.options && type.hasValue === true) { + that.optionSelectLabel.css({'left':'auto'}) + that._getLabelWidth(that.optionSelectLabel, function(lw) { + that.optionSelectTrigger.css({'width':(23+lw)+"px"}); + that.elementDiv.css('right',(23+lw)+"px"); + that.input.css({ + 'border-top-right-radius': 0, + 'border-bottom-right-radius': 0 + }); }); + } else { + that.optionSelectLabel.css({'left':'0'}) + that.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'}); + if (!that.optionExpandButton.is(":visible")) { + that.elementDiv.css({'right':0}); + that.input.css({ + 'border-top-right-radius': '4px', + 'border-bottom-right-radius': '4px' + }); + } } } - } + }); } }, _updateOptionSelectLabel: function(o) { @@ -624,6 +627,8 @@ } else if (opt.icon.indexOf("/") !== -1) { image = new Image(); + image.onload = function() { that._resize(); } + image.onerror = function() { that._resize(); } image.name = opt.icon; image.src = mapDeprecatedIcon(opt.icon); $('',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel); @@ -766,10 +771,7 @@ } this.input.trigger('change',this.propertyType,this.value()); } - if (image) { - image.onload = function() { that._resize(); } - image.onerror = function() { that._resize(); } - } else { + if (!image) { this._resize(); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss index f4746340a..63e5e0d2d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss @@ -90,6 +90,9 @@ display: inline-block; height: 100%; padding: 0 1px 0 5px; + img { + max-width: none; + } } &:not(.disabled):hover {