# 'dropdown' node - layout help

**URL:** <https://discourse.nodered.org/t/dropdown-node-layout-help/36432>\
**Category:** Dashboard\
**Created:** [24 November 2020 05:02 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432 "2020-11-24T05:02:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 November 2020 05:02 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/1 "2020-11-24T05:02:25Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/dffa9d6f48beb07ea298d53d8b6378301b932a19.png)

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 November 2020 06:35 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/2 "2020-11-24T06:35:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 05:29 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/3 "2020-11-26T05:29:27Z")

</div>

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.

 ![Screenshot from 2020-11-26 16-35-06](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0aaf0d761176cde2d590d7b874b8ab142154b710.png)

More coming soon - I hope.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 07:59 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/4 "2020-11-26T07:59:20Z")

</div>

As you know I am playing with CSS somewhat.

That could be the problem. ☹

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 08:04 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/5 "2020-11-26T08:04:12Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 08:07 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/6 "2020-11-26T08:07:14Z")

</div>

(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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 08:10 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/7 "2020-11-26T08:10:59Z")

</div>

(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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 08:12 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/8 "2020-11-26T08:12:21Z")

</div>

> [@Trying\_to\_learn](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 08:14 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/9 "2020-11-26T08:14:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 08:38 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/10 "2020-11-26T08:38:37Z")

</div>

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.

```auto
{"timers":[{"starttime":10500000,"endtime":11100000,"days":[0,0,1,0,1,0,1],"sendContinuous":false,"onlySendStart":{"isActivated":false,"valueToRun":true}}]}

```

```auto
[{"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}]

```

```auto
[{"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.

```auto
[{"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.

```auto
[{"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}]

```

```auto
[{"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.

```auto
[{"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}]

```

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [26 November 2020 09:14 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/11 "2020-11-26T09:14:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 09:16 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/12 "2020-11-26T09:16:43Z")

</div>

I shall take that on Paul. Thanks.

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 10:55 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/13 "2020-11-26T10:55:08Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/880501c76ebf334e64eb17172f8417e34c98d23c.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 19:45 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/14 "2020-11-26T19:45:04Z")

</div>

![Screenshot from 2020-11-27 06-45-48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf7d3793dbd742cb46b044778ae92b152da638e0.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 19:47 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/15 "2020-11-26T19:47:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 19:48 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/16 "2020-11-26T19:48:30Z")

</div>

I reposted the image with the extra bit showing.

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 19:53 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/17 "2020-11-26T19:53:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 19:55 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/18 "2020-11-26T19:55:59Z")

</div>

The width is two.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 November 2020 20:16 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/19 "2020-11-26T20:16:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [26 November 2020 20:18 UTC](https://discourse.nodered.org/t/dropdown-node-layout-help/36432/20 "2020-11-26T20:18:17Z")

</div>

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.

[Next page](https://discourse.nodered.org/t/dropdown-node-layout-help/36432.md?page=2)