# Dashboard dropdown - button

**URL:** <https://discourse.nodered.org/t/dashboard-dropdown-button/17812>\
**Category:** Dashboard\
**Created:** [11 November 2019 23:00 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812 "2019-11-11T23:00:17Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [11 November 2019 23:00 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/1 "2019-11-11T23:00:17Z")

</div>

I used a dropdown and 2 buttons on 1 line together  
Then the button is placed over the dropdown options  
but i want it after the options and not over it, i guess it is a bug?

 ![25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a35193aa9a753c0bb6a9d8060f4845fc962da1da.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 November 2019 10:53 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/2 "2019-11-12T10:53:27Z")

</div>

coouple basic questions

- what versions of NR, node.js
- what version of node-red-dashbord?

Please provide a stripped down version of your flow demonstrating the issue after reading [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [12 November 2019 11:21 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/3 "2019-11-12T11:21:21Z")

</div>

NR and dashboard latest versions, node.js no idea, can i found that in the editor screen?

below stripped version that show the effects

```auto
[{"id":"45bbb5cf.eaa734","type":"ui_dropdown","z":"b987bcc.fd7194","name":"Audio theme select","label":"Audio theme","tooltip":"Selecteer audio thema","place":"Select option","group":"b78a49ef.87c7","order":1,"width":"5","height":"2","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":190,"y":260,"wires":[[]]},{"id":"b1435a95.65ac6","type":"ui_dropdown","z":"b987bcc.fd7194","name":"Audio hint select","label":"Audio hint","tooltip":"Selecteer audio hint","place":"Select option","group":"b78a49ef.87c7","order":9,"width":"5","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":190,"y":320,"wires":[[]]},{"id":"2c088aac.bde026","type":"ui_dropdown","z":"b987bcc.fd7194","name":"Audio background select","label":"Audio background","tooltip":"Selecteer audio background","place":"Select option","group":"b78a49ef.87c7","order":5,"width":"5","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":210,"y":380,"wires":[[]]},{"id":"2e8e0ab4.9059ee","type":"ui_button","z":"b987bcc.fd7194","name":"stop theme","group":"b78a49ef.87c7","order":3,"width":"2","height":"2","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":710,"y":260,"wires":[[]]},{"id":"b8c74fb5.f9509","type":"ui_button","z":"b987bcc.fd7194","name":"play theme","group":"b78a49ef.87c7","order":2,"width":"2","height":"2","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":490,"y":260,"wires":[[]]},{"id":"3018cb1f.b4492c","type":"ui_button","z":"b987bcc.fd7194","name":"stop hint","group":"b78a49ef.87c7","order":11,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":700,"y":320,"wires":[[]]},{"id":"f09423c4.e5d8f","type":"ui_button","z":"b987bcc.fd7194","name":"play hint","group":"b78a49ef.87c7","order":10,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":480,"y":320,"wires":[[]]},{"id":"10c08d35.cc6233","type":"ui_button","z":"b987bcc.fd7194","name":"stop background","group":"b78a49ef.87c7","order":7,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":730,"y":380,"wires":[[]]},{"id":"ff7f90e9.8e68","type":"ui_button","z":"b987bcc.fd7194","name":"play background","group":"b78a49ef.87c7","order":6,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":510,"y":380,"wires":[[]]},{"id":"a20b110d.5a08b8","type":"ui_slider","z":"b987bcc.fd7194","name":"theme volume","label":"","tooltip":"Volume","group":"b78a49ef.87c7","order":4,"width":"5","height":"2","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":940,"y":260,"wires":[[]]},{"id":"38a024c8.1a1cfc","type":"ui_slider","z":"b987bcc.fd7194","name":"hint volume","label":"slider","tooltip":"","group":"b78a49ef.87c7","order":12,"width":"5","height":"1","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":930,"y":320,"wires":[[]]},{"id":"b907ddf.7812ca","type":"ui_slider","z":"b987bcc.fd7194","name":"background volume","label":"slider","tooltip":"","group":"b78a49ef.87c7","order":8,"width":"5","height":"1","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":960,"y":380,"wires":[[]]},{"id":"b78a49ef.87c7","type":"ui_group","z":"","name":"audio controls","tab":"cd07c6f4.fbdb7","order":1,"disp":false,"width":"14","collapse":false},{"id":"cd07c6f4.fbdb7","type":"ui_tab","z":"","name":"Audio setup","icon":"fa-audio-description","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 November 2019 11:41 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/4 "2019-11-12T11:41:51Z")

</div>

> [@RogierQ](#):
>
> node.js no idea

Run `node -v` in a terminal. Or look at the node-red log if you start node red in a terminal.

> [@RogierQ](#):
>
> NR and dashboard latest versions

It is better to tell us the actual versions. "latest versions" may not be accurate by the time I read this and will certainly not be accurate when someone looks at this in a few months time. The best plan is to start node-red in a terminal and post the startup log here, that is the log that starts Welcome to node-red.

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [12 November 2019 12:02 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/5 "2019-11-12T12:02:46Z")

</div>

> [@Colin](#):
>
> node -v

node -v gives 10.17.0  
NR 1.02  
Dashboard 2.17.1

```auto
12 Nov 13:03:31 - [info] Node-RED version: v1.0.2
12 Nov 13:03:31 - [info] Node.js version: v10.17.0
12 Nov 13:03:31 - [info] Linux 4.19.75-v7+ arm LE
12 Nov 13:03:34 - [info] Loading palette nodes
12 Nov 13:03:48 - [info] Dashboard version 2.17.1 started at /ui
12 Nov 13:03:48 - [info] Settings file : /home/pi/.node-red/settings.js
12 Nov 13:03:48 - [info] Context store : 'default' [module=memory]
12 Nov 13:03:48 - [info] User directory : /home/pi/.node-red
12 Nov 13:03:48 - [warn] Projects disabled : editorTheme.projects.enabled=false

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 November 2019 12:41 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/6 "2019-11-12T12:41:50Z")

</div>

Remember the dashbaord is responsive so things will move when the window resizes. You might want to add a couple groups. Maybe create three groups "Theme", "Background" and "Hints" and place the items that apply into the corrosponding group.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 November 2019 22:18 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/7 "2019-11-12T22:18:55Z")

</div>

Actually I think the "error" is that the text on the select is so wide it is forcing the dropdown out of its group area. (still investigating)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f8c7d9d6b161ff67b188c25162b5c38bdac910a2.png)

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [12 November 2019 22:37 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/8 "2019-11-12T22:37:23Z")

</div>

i guess you are totally right!  
Sorry for wasting your time...!  
Only thing is then the alignment of the awesome button.  
And i guess the icon with the value of the slider can't be switched off?

 ![02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bea9162d9e4ff0f1c15918fd85b59e9075a3d8b4.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 November 2019 22:48 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/9 "2019-11-12T22:48:09Z")

</div>

Pushed an update to master to limit the overflow...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/33236cd964f54a4d92e3ad032dc97ae98eb06639.png)  
If you set the slider to "continuous while sliding" mode it won't show the value.  
What grid size have you set the 1x1 base grid to be on your dashboard - I'm guessing it must be too small for the fa-icons to fit snugly - they should auto centre.

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [13 November 2019 06:39 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/10 "2019-11-13T06:39:28Z")

</div>

Thanks for the update 😉  
The size is 27x25, what is the size you use in the above example?

---

<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:** [13 November 2019 10:14 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/11 "2019-11-13T10:14:34Z")

</div>

Quick fix will be setting style of md-button with `ui_template` node

```auto
<style>
    .md-button{
        font-size:10px;
        line-height:normal;
    }
</style>

```

Actual support for such of small 1X1 grid size I couldn't figure out. Takes a lot of effort.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [13 November 2019 11:07 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/12 "2019-11-13T11:07:57Z")

</div>

Indeed - in general I wouldn't really recommend going below about 32 x 32 as a minimum.

---

<div class="post-metadata">

**Author:** ![Achronite](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achronite/32/31868_2.png) [@Achronite](https://discourse.nodered.org/u/Achronite)\
**Post date:** [3 March 2020 19:09 UTC](https://discourse.nodered.org/t/dashboard-dropdown-button/17812/13 "2020-03-03T19:09:29Z")

</div>

I have just upgraded to 2.19.4 dashboard from a much earlier version, and my 1x1 dropdown buttons are no longer rendering properly. I'm currently using them to select a time, but there is now loads of white space around the buttons in the new version making the time not render fully any more ☹

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1bcc57b8093a75b1592e15c1b347eebadec60fb9.png)

I think I'm using the defaults: 48x48 for button size with 6x6 for widget and group spacing.

Anyone get any ideas how to fix this?