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?
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
NR and dashboard latest versions, node.js no idea, can i found that in the editor screen?
below stripped version that show the effects
[{"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}]
Run node -v in a terminal. Or look at the node-red log if you start node red in a terminal.
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.
node -v gives 10.17.0
NR 1.02
Dashboard 2.17.1
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
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.
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)
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?
Pushed an update to master to limit the overflow...
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.
Thanks for the update 
The size is 27x25, what is the size you use in the above example?
Quick fix will be setting style of md-button with ui_template node
<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.
Indeed - in general I wouldn't really recommend going below about 32 x 32 as a minimum.
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 
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?
