'dropdown' node - layout help

I have not used the dropdown node much - if at all.

I am kind of seeing why. (No offense)

But the node (GUI side) is very..... poorly done.

Screenshot from 2020-11-24 15-59-32

To get the dropdown list visible I have to click on that tiny thing at the bottom left right (or: the OTHER LEFT) of the area.

Someone, please.... Am I missing an elephant in the room?
Node Red 1.2.2
Dashboard 2.23.0
Machine: RasPi 2B stretch.

Tried pretty hard to reproduce what you are seeing. No luck.
So:

  1. Clear browser cache
  2. May be you are using styles which override defaults for drop-down somewhere? By mistake?
  3. Ho are the site sizes and group size configured?
  4. What browser you are using?

Hi.

In answer to your questions:

2 - probably.
4 - Firefox. 83.0
1 - shall try soon.
3 - Hang on and I will find out.

(I have just recovered from 4 weeks with no computer. I've been using a "spare" one.)

Gee, how you miss your computer when it isn't working.

Ok, tried with Chrome. Same result.

More coming soon - I hope.

As you know I am playing with CSS somewhat.

That could be the problem. :frowning:

It can be a problem.
And it is easy to figure out if all your CSS adjustments done are in one template node. I so, please share that, and the issue can be figured out easily.
If not, You are in trouble a bit ...(hard to get help if you don't know what to share for investigation)

(Big cheesy grin)

One!!!????

There are many.

That is because I was keeping a node for each "section" on a flow and as the iterations increased, the nodes increased and then they spread to other flows too.

I'll try to look into it and amalgamate them into one and see what happens.
(Yes, I know: I asked the question)

I have a lot of catch up to do after 4 weeks without this machine.

Sorry.

Please don't take that as me not appreciating the offer.
I am seriously needing to ...... get back on my feet with the machine. The withdrawal symptoms were horrible!

I was really not dealing with it well.

(thought!)

If I install that node on another machine and see what it does that could help me see what it should do when all is good.

Yes, not helping with the problem as is. But it would give me a working and not working to see the difference.

Not the best practice but ...
You can share them all if you can find them ....

Ok, I will scurry off and find them all.... This is going to be fun.

I'll post now as I am not 100% sure of the machine's stability.

Ok, to the best of my knowledge these are the only nodes.

They are grouped into flows.

The nodes could be anywhere on the flow.

Sorry. I've made each its own line.
I put them in as code to help you copy them.

{"timers":[{"starttime":10500000,"endtime":11100000,"days":[0,0,1,0,1,0,1],"sendContinuous":false,"onlySendStart":{"isActivated":false,"valueToRun":true}}]}
[{"id":"d78b3ccd.235a58","type":"ui_template","z":"aa48e352.9ad2f8","group":"bac7ba06.8fc4","name":"Picture Machine health","order":1,"width":"0","height":"0","format":"<style>\n    body {\n        background-image: url(\"/Pictures/metal_4.jpg\");\n        background-repeat: repeat;\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1120,"y":60,"wires":[[]]},{"id":"bac7ba06.8fc4","type":"ui_group","name":"BedPi Machine health","tab":"50f4e688.7d4b7","order":1,"disp":true,"width":"9","collapse":false},{"id":"50f4e688.7d4b7","type":"ui_tab","name":"Machine health","icon":"fa-heartbeat","order":6,"disabled":false,"hidden":false}]
[{"id":"214e1d64.f7dad2","type":"ui_template","z":"c618f347.dd4dd","group":"c830ca0b.a2b958","name":"CSS pictures EVENTS","order":6,"width":0,"height":0,"format":"<style>\n    #Events_Links {\n    background-image: url(\"/Pictures/metal_1.jpg\");\n    }\n    #Events_TelePi {\n    background-image: url(\"/Pictures/metal_1.jpg\");\n    }\n </style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1090,"y":80,"wires":[[]]},{"id":"c830ca0b.a2b958","type":"ui_group","name":"Links","tab":"7b4b1d82.b47364","order":1,"disp":true,"width":"4","collapse":false},{"id":"7b4b1d82.b47364","type":"ui_tab","name":"Events","icon":"list","order":3,"disabled":false,"hidden":false}]

This is for groups of buttons I made
And sorry, some may not actually be being used.
Though, yes, I guess they are still "in the system". So maybe just as well I have them here.

[{"id":"2e17bd71.eb344a","type":"ui_template","z":"bb0180b.3a5d78","group":"19717f64.72eaf1","name":"TV-HDMI template","order":7,"width":0,"height":0,"format":"<style id=\"TV-HDMI\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .TV-HDMI:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .TV-HDMI{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button TV-HDMI bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .TV-HDMI.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .TV-HDMI.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .TV-HDMI.black{\n        background-color: black !important;\n        color: #cccccc !important;\n    }\n\n    .TV-HDMI.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .TV-HDMI.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":550,"y":200,"wires":[[]]},{"id":"11e3f234.56e7de","type":"ui_template","z":"bb0180b.3a5d78","group":"81ee46bf.b4ba9","name":"Background pictures","order":32,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-cardtitle {\n        text-align:center;\n    }\n    body {\n        background-image: url(\"/Pictures/metal_4.jpg\");\n        background-repeat: repeat;\n    }\n    #HDMI_TV_control_Full_Remote,#HDMI_TV_control_Full_RemoteBest,#HDMI_TV_control_Full_Remote2,#HDMI_TV_control_Audio,#HDMI_TV_control_Navigation,#HDMI_TV_control_Playback_Ctl,#HDMI_TV_control_POWER,#HDMI_TV_control_Audio{\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1760,"y":60,"wires":[[]]},{"id":"9efcebf3.976da8","type":"ui_template","z":"bb0180b.3a5d78","group":"19717f64.72eaf1","name":"THIS IS THE TEMPLATE","order":7,"width":0,"height":0,"format":"<style id=\"TV-NAV\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .TV-NAV:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .TV-NAV{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button TV-NAV bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .TV-NAV.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .TV-NAV.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .TV-NAV.remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .TV-NAV.remote-iconS{\n        font-size:0.5em;\n    }\n\n    .TV-NAV.black{\n        background-color: black !important;\n        color: #cccccc !important;\n    }\n\n    .TV-NAV.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .TV-NAV.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":4520,"y":510,"wires":[[]]},{"id":"2cb104c1.7f00cc","type":"ui_template","z":"bb0180b.3a5d78","group":"19717f64.72eaf1","name":"THIS IS THE TEMPLATE","order":7,"width":0,"height":0,"format":"<style id=\"TV-AUDIO\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .TV-AUDIO:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .TV-AUDIO{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button TV-AUDIO bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .TV-AUDIO.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .TV-AUDIO.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .TV-AUDIO.black{\n        background-color: black !important;\n        color: #cccccc !important;\n    }\n\n    .TV-AUDIO.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .TV-AUDIO.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":3390,"y":1290,"wires":[[]]},{"id":"ed5dd49b.7e2368","type":"ui_template","z":"bb0180b.3a5d78","group":"9f0d875f.579cd8","name":"Pause/Play 3 x 1","order":18,"width":"3","height":"1","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#000000\" ng-click=\"send({payload: 'dummy_payload'})\">\n       <i class=\"material-icons\">\n           <span style=\"color:{{msg.payload.pause}}\">pause</span> / <span style=\"color:{{msg.payload.play}}\">play_arrow</span>\n           </i>\n</md-button> ","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":3920,"y":3140,"wires":[[]]},{"id":"460721c7.719828","type":"ui_template","z":"bb0180b.3a5d78","group":"75a5ab41.513c34","name":"Look at me, I am interesting","order":1,"width":"2","height":"1","format":"<style>\n<md-button class=\"md-accent md-raised\">Raised and Accent Button</md-button>\nbody\n.button {\n  background-color: #4CAF50; /* Green */\n  border: none;\n  color: white;\n  padding: 1px 2px;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 16px;\n}</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":4230,"y":3670,"wires":[[]]},{"id":"1bad6001.a79f68","type":"ui_template","z":"bb0180b.3a5d78","group":"75a5ab41.513c34","name":"V Up","order":3,"width":2,"height":"1","format":"<button ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\">\n    <font color = {{msg.colour}}  class=\"fa fa-bullseye fa-2x\"> </font>\n</button>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":4220,"y":3710,"wires":[[]]},{"id":"19717f64.72eaf1","type":"ui_group","name":"HOME","tab":"1e6b66e.c382199","order":1,"disp":true,"width":3,"collapse":false},{"id":"81ee46bf.b4ba9","type":"ui_group","d":true,"name":"Full_Remote","tab":"894bcb09.d5147","order":1,"disp":false,"width":"3","collapse":false},{"id":"9f0d875f.579cd8","type":"ui_group","name":"SPARE","tab":"4d51679.d562098","order":3,"disp":true,"width":"6","collapse":false},{"id":"75a5ab41.513c34","type":"ui_group","name":"Group 7","tab":"4d51679.d562098","order":4,"disp":true,"width":6},{"id":"1e6b66e.c382199","type":"ui_tab","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false},{"id":"894bcb09.d5147","type":"ui_tab","name":"HDMI_TV_control","icon":"dashboard","order":12,"disabled":false,"hidden":false},{"id":"4d51679.d562098","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":9}]

Another sheets with groups of buttons.

[{"id":"674bd55c.6b5574","type":"ui_template","z":"f2628bdb.5fd1c","group":"d6624dbf.b86a68","name":"Backgrounds","order":7,"width":0,"height":0,"format":"<style>\n    #IR_Remote_Controler{\n    background-image: url(\"/Pictures/metal_2.jpg\");\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":380,"y":130,"wires":[[]]},{"id":"743a21d3.5e6a","type":"ui_template","z":"f2628bdb.5fd1c","group":"d2fcbc5e.e51d7","name":"TV-IR *","order":7,"width":0,"height":0,"format":"<style id=\"TV-IR\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .TV-IR:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .TV-IR{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button TV-IR bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .TV-IR.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .TV-IR.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .TV-IR.black{\n        background-color: black !important;\n        color: #cccccc !important;\n    }\n    .TV-IR.red{\n        background-color: red !important;\n        color: white !important;\n    }\n    .TV-IR.green{\n        background-color: green !important;\n        color: white !important;\n    }\n    .TV-IR.yellow{\n        background-color: yellow !important;\n        color: white !important;\n    }\n    .TV-IR.blue{\n        background-color: blue !important;\n        color: white !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":550,"y":270,"wires":[[]],"info":"This if for the TV-IR control"},{"id":"ac7fec60.676ad","type":"ui_template","z":"f2628bdb.5fd1c","group":"d2fcbc5e.e51d7","name":"AMP-IR","order":7,"width":0,"height":0,"format":"<style id=\"AMP-IR\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .AMP-IR:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .AMP-IR{\n        background-color: black !important;\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button AMP-IR bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .AMP-IR.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .AMP-IR.small{\n        font-size:0.7em;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .AMP-IR.black{\n        background-color: black !important;\n        color: #cccccc !important;\n    }\n\n    .AMP-IR.red{\n        background-color: red !important;\n        color: #cccccc !important;\n    }\n    .AMP-IR.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":530,"y":1410,"wires":[[]]},{"id":"bbced6d4.fa89c8","type":"ui_template","z":"f2628bdb.5fd1c","group":"d2fcbc5e.e51d7","name":"DVD","order":7,"width":0,"height":0,"format":"<style id=\"DVD-IR\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n    .DVD-IR:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n\n    /*   This is the normal button definition  */\n    .DVD-IR{\n        background-color: #cccccc !important;\n        /*background-color: orange;*/\n        color: black;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button DVD-IR bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .DVD-IR.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .DVD-IR.small{\n        font-size:0.6em;\n    }\n    /*  This is to make round buttons I hope and nothing else */\n    .round{\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 50%;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n    /*  This is for buttons that are 2 lines up/down    */\n    .X2{\n        height: 102px;\n        color: black;\n    }\n\n    .DVD-IR.orange{\n        background-color: orangered !important;\n        color: white !important;\n    }\n    .DVD-IR.red:not([disabled]):hover{\n         background-color: blue !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":460,"y":2030,"wires":[[]]},{"id":"d6624dbf.b86a68","type":"ui_group","name":"Amp","tab":"95f64512.d2fa88","order":3,"disp":true,"width":"8","collapse":true},{"id":"d2fcbc5e.e51d7","type":"ui_group","name":"HOME","tab":"a44df223.631288","order":1,"disp":true,"width":3,"collapse":false},{"id":"95f64512.d2fa88","type":"ui_tab","name":"IR_Remote_Controler","icon":"dashboard","order":13,"disabled":false,"hidden":false},{"id":"a44df223.631288","type":"ui_tab","name":"TEST","icon":"dashboard","order":8,"disabled":false,"hidden":false}]
[{"id":"866f469.11b5d38","type":"ui_template","z":"bdc47459.27c378","group":"8ecd4a5a.95afe8","name":"CSS only ","order":7,"width":0,"height":0,"format":"<style id=\"program-names\">\n    :root {\n      --dashboard-unit-width: 48px;\n      --dashboard-unit-height: 48px;\n    }\n    .nr-dashboard-template {\n        padding: 0px;\n    }\n\n/*    \n    .program-names.disabled{\n        cursor: not-allowed;\n        pointer-events: none;\n        color: #aaaaaa !important;\n    }\n    \n    .program-names:not([disabled]):hover{\n         background-color: #232323 !important;\n    }\n*/\n    /*   This is the normal button definition  */\n    .program-names{\n        background-color: var(--program-names-background);\n        color: var(--program-names-foreground);\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n        }\n    /*  This is a sub-set which is invoked by */\n    /*  <md-button class=\"md-button program-names bigger\"> */\n    /*  note the (space) \"bigger\" at the end.  */\n    .program-names.bigger{\n        font-weight:bold;\n        font-size:1.5em;\n    }\n    /*  This is for buttons with a lot of text.  `font-size:0.7em` */\n    /*  makes the font 70% normal size  */\n    .program-names.small{\n        font-size:0.7em;\n    }\n    .program-names.bold{\n        font-weight:bold;\n    }\n    /*  This is for buttons with just icons, to upsize the size */\n    /*  of the icon with the line: */\n    /*  <i class=\"fa fa-fw fa-plus remote-icon\"> in the other node  */\n    .remote-icon{\n        font-size:2.0em;\n    }\n    /*  This is the same as the other one, but it makes the icon smaller  */\n    .remote-iconS{\n        font-size:0.5em;\n    }\n\n    .program-names.black{\n        background-color: var(--program-names-background) !important;\n        color: var(--program-names-foreground) !important;\n    }\n\n    .program-names.teal{\n        background-color: teal;\n        color: var(--program-names-foreground) !important;\n    }\n\n    .program-names.red{\n        background-color: red !important;\n        color: var(--program-names-foreground) !important;\n    }\n    .program-names.red:not([disabled]):hover{\n         background-color: orange !important;\n    }\n    \n    .program-names.darkred{\n        background-color: darkred !important;\n        color: black !important;\n    }\n    .font-black{\n        color: black;\n    }\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":310,"y":280,"wires":[[]]},{"id":"8ecd4a5a.95afe8","type":"ui_group","name":"2020  04 28 2300","tab":"745c302b.f10a3","order":1,"disp":true,"width":"3","collapse":false},{"id":"745c302b.f10a3","type":"ui_tab","name":"NEW","icon":"dashboard","order":18,"disabled":false,"hidden":false}]

This is the flow which has the node.

[{"id":"1a65c889.d1263f","type":"ui_template","z":"6dd5ca4d.d1958c","group":"21cb36d6.a8301a","name":"Formatting","order":4,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-cardtitle {\n        text-align:center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":530,"y":110,"wires":[[]]},{"id":"21cb36d6.a8301a","type":"ui_group","name":"BAUHN-1","tab":"e92ac76d.c24e7","order":2,"disp":true,"width":"4","collapse":false},{"id":"e92ac76d.c24e7","type":"ui_tab","name":"Real_World_Control","icon":"dashboard","order":14,"disabled":false,"hidden":false}]
[{"id":"7c17927c.bbc9dc","type":"ui_template","z":"74e6f1b3.a5005","group":"b49637fb.a63368","name":"stuff","order":0,"width":"0","height":"0","format":"<style>\n  .filled { \n      height: 100% !important;\n\n      padding: 0 !important;\n      margin: 0 !important;\n  }\n  .nr-dashboard-template {\n      padding: 0;\n      margin: 0;\n  }\n\n    .door-button{\n        color: #cccccc !important;\n        height: var(--dashboard-unit-height);\n        width: 100%;\n        border-radius: 10px;\n        font-size:1.0em;\n        font-weight:normal;\n        margin: 0;\n        min-height: 36px;\n        min-width: unset;\n        line-height: unset;\n    }\n\n    .door-button.normal{\n        background-color: #16a085 !important;\n        color: white !important;\n    }\n    .door-button.busy{\n        background-color: #c0392b !important;\n        color: white !important;\n    }\n    .door-button.oto{\n        background-color: #e67322 !important;\n        color: white !important;\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":930,"y":130,"wires":[[]]},{"id":"b49637fb.a63368","type":"ui_group","name":"Front door status","tab":"fe238131.e3e368","order":2,"disp":true,"width":"12","collapse":false},{"id":"fe238131.e3e368","type":"ui_tab","name":"Door control","icon":"mi-meeting_room","order":16,"disabled":false,"hidden":false}]

Why not disable each of your ui-template nodes that contain CSS.
If that resolves the problem, then re-enable them one by one, until you isolate the one causing the conflict?

1 Like

I shall take that on Paul. Thanks.

Again: I am still trying to get used to the computer after 4 weeks without it.

If you did find them all
and
If I did import them all
Then
There is nothing to affect the dropdown.

Show the settings of the dashboard you have configured

The image is cut just before last values of size configuration.

I reposted the image with the extra bit showing.

Sorry. I didn't notice that until I had posted it and so edited it.

Ok. Also needed the width of that group where dropdown is and the dropdown size configuration.

The width is two.

[{"id":"bb789fe4.5a95e8","type":"ui_dropdown","z":"6dd5ca4d.d1958c","name":"Selector","label":"Selector","tooltip":"","place":"Select option","group":"33a71b63.59733c","order":5,"width":"2","height":"1","passthru":true,"multiple":false,"options":[{"label":"B1","value":"B1","type":"str"},{"label":"B2","value":"B2","type":"str"},{"label":"B3","value":"B3","type":"str"}],"payload":"","topic":"SELECTION","x":1980,"y":4170,"wires":[["d12c51c0.98ad58","8f9753db.b2b75","b2a94983.ede8f"]]},{"id":"33a71b63.59733c","type":"ui_group","name":"Others","tab":"e92ac76d.c24e7","order":7,"disp":true,"width":"2","collapse":false},{"id":"e92ac76d.c24e7","type":"ui_tab","name":"Real_World_Control","icon":"dashboard","order":14,"disabled":false,"hidden":false}]

Can confirm that 2 units width is way under the required width for this widget.
But only if you have the "Label" defined. Leave the Label field empty and you will get acceptable results.
I cant see any real way to fix something in widget cos it is something the designer doesn't even take as possible layout solution to offer.

And now "today's dumb question":

Is the (minimum) size limit declared anywhere?
Others (may) have this problem too.

It would be nice to know.