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 88c842c2f..a6713951a 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 @@ -657,11 +657,13 @@ this.optionExpandButton.shown = false; } if (this.optionSelectTrigger) { - this.optionSelectTrigger.show(); + this.optionSelectTrigger.css({"display":"inline-flex"}); if (!opt.hasValue) { + this.optionSelectTrigger.css({"flex-grow":1}) this.elementDiv.hide(); this.valueLabelContainer.hide(); } else { + this.optionSelectTrigger.css({"flex-grow":0}) this.elementDiv.show(); this.valueLabelContainer.hide(); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index b13941f22..c95fecad6 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -633,7 +633,7 @@ button.red-ui-toggleButton.toggle { .red-ui-typedInput-value-label,.red-ui-typedInput-option-label { select,.placeholder-input { margin: 3px; - height: 26px; + height: 24px; width: calc(100% - 10px); padding-left: 3px; } 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 243c42e17..ffa424841 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 @@ -171,25 +171,21 @@ button.red-ui-typedInput-option-trigger { padding: 0 0 0 0; position:relative; flex-grow: 1; + line-height: 32px; + display: inline-flex; .red-ui-typedInput-option-label { background:$form-button-background; color: $form-text-color; - position:absolute; - left:0; - right:23px; - top: 0; - padding: 0 5px 0 8px; - i.red-ui-typedInput-icon { - margin-right: 4px; - } + flex-grow: 1; + padding: 0 0 0 8px; + display:inline-block; } .red-ui-typedInput-option-caret { - top: 0; - position: absolute; - right: 0; - bottom: 0; - width: 17px; - padding-left: 5px; + flex-grow: 0; + display:inline-block; + width: 23px; + text-align: center; + height: 100%; &:before { content:''; display: inline-block;