CSS help for fixing D2 issue

Dashboard
1

The Text Input and Number input widgets in the flowfuse dashboard (D2) do not pay correct attention to the row height specified in the theme when the Row Height is set to other than the default (48px). For example when this is set to Compact (32px) the Text Input, Number Input and Dropdown widgets appear as

image
image755Ă—183 8.84 KB

It can be seen that the text in and number surrounding boxes are too tall. They should align with the buttons, as the dropdown widget does.

Strangely, the dropdown widget, which also used to show the problem seems to have magically fixed itself, which is odd. Probably the reason will appear once the problem with the others is understood.

Inspecting the page I can see that each one consists of a div with class v-input which is correctly 32px high (though it shows a dotted box 48px high). Then inside that is a v-input__control which is 48px high, which it should not be.
With my limited experience with CSS I have been unable to work out why, so if one of you CSS wizards could point me in the right direction I would be most grateful.

Here is the flow

[{"id":"669ac9d147cf2ccb","type":"ui-button","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"button 1","label":"button 1","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":180,"y":7440,"wires":[[]]},{"id":"60070b7c35029059","type":"ui-text-input","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"text in 1","label":"text in 1","order":2,"width":"5","height":"1","topic":"topic","topicType":"msg","mode":"text","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":340,"y":7440,"wires":[[]]},{"id":"87c725f8aff519ac","type":"ui-number-input","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"number 1","label":"number","order":4,"width":"5","height":"1","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"tooltip":"","passthru":true,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","spinner":"default","x":340,"y":7500,"wires":[["a5ef281e38f5cf0c"]]},{"id":"bfc3b93e41c90c05","type":"ui-dropdown","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"select 1","label":"Select Option:","tooltip":"","order":6,"width":"5","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"a","type":"str"},{"label":"","value":"b","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":340,"y":7560,"wires":[[]]},{"id":"ba5a04e029c11a75","type":"ui-button","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"button 2","label":"button 2","order":3,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":180,"y":7500,"wires":[[]]},{"id":"c086bf21426f428b","type":"ui-button","z":"997da33a0beedade","group":"d92eb51f258edce2","name":"button 3","label":"button 3","order":5,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":180,"y":7560,"wires":[[]]},{"id":"d92eb51f258edce2","type":"ui-group","name":"Compact Group","page":"58c1725ba4ca6bda","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"58c1725ba4ca6bda","type":"ui-page","name":"Compact","ui":"ID-BASE-1","path":"/compact","icon":"home","layout":"grid","theme":"990cb1ccd8901c15","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"990cb1ccd8901c15","type":"ui-theme","name":"cdl compact","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"c456e8d3f836fb2d","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.0"}}]

For reference the issue on github is #1935

[Edit] Ah, the dropdown widget expands to the same size as the other two when it is populated.

2

You could try this, but since I know not of what I tweek it may have undesirable side effects.

.v-input .v-field, .v-input .v-field__input {
    height: var(--widget-row-height);
}

It's not the correct answer: once you choose a dropdown item and leave the field, it gets redisplayed too far down.

image
image906Ă—127 5.08 KB

3

I would really like to understand what is causing the problem, then hopefully a good solution will be clear.

4

It can be fixed in the console by editing;

.v-input--density-compact {
    --v-input-control-height: 40px;
    --v-input-padding-top: 8px;    /* set to 0px */
}

and

.v-input--density-compact .v-field--variant-outlined, 
.v-input--density-compact .v-field--single-line, 
.v-input--density-compact .v-field--no-label {
    --v-field-padding-bottom: 8px;      /* set to 0px */

}

But I have no idea how to make this a permanent fix

5

Thanks, that got me going in the right direction, I think I see the solution. Will post when I have finalised it.

6

It turns out the problem was due to the fact that text field was defaulting to having padding above and below the text of 12px, which meant that when there was any text present it was pushing the height up giving the effect seen. That is why the dropdown was ok until an element was selected. The fix in the css file for the dashboard it to add

.nrdb-app .v-field--variant-outlined {
    --v-field-input-padding-top: 2px;
    --v-field-input-padding-bottom: 2px;
}
8

Yours was a partial fix as it did force the box to be the right size, but then the large padding above the text put the text too low. With the padding reduced there isn't any need to force it to that size as other stuff makes it want to be that size anyway. But as I said, yours and @Buckskin's ideas got me going down the right path.

I am just creating a PR for the fix.

Thanks for the help.

1 Like
9

Colin, check what happens when a validation message appears (it all takes up a lot of space!)

10

How do I make a validation message appear?