# Dashboard small button alignment

**URL:** <https://discourse.nodered.org/t/dashboard-small-button-alignment/17811>\
**Category:** Dashboard\
**Created:** [11 November 2019 22:17 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811 "2019-11-11T22:17:48Z")\
**Posts on this page:** 6\
**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 22:17 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/1 "2019-11-11T22:17:48Z")

</div>

Hi, i created some small buttons.  
But the font awesome is not so awesome is the alignment of the buttons.  
Is it possible to adjust this?

![29](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/357cff253de52f2c7e4ddc42362e8d0db84fd426.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:** [11 November 2019 23:05 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/2 "2019-11-11T23:05:15Z")

</div>

Probably.

---

<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:06 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/3 "2019-11-11T23:06:01Z")

</div>

cool, but how is the question then... how can i fix it?

---

<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:** [11 November 2019 23:12 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/4 "2019-11-11T23:12:53Z")

</div>

No idea . How have you created then in the first place ? Give us a clue

---

<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:16 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/5 "2019-11-11T23:16:37Z")

</div>

the button size is 1x1 and size setting is 27x25  
just normal button with a icon.  
nothing special or different

this is the code, hope this clears more, don't know what to tell more about it to make it more clear, sorry

```auto
[{"id":"6c2ec436.5c570c","type":"ui_text_input","z":"86829614.e78918","name":"Hint 1","label":"Hint 1","tooltip":"tooltip","group":"9bce1c47.a279c","order":10,"width":"24","height":"2","passthru":true,"mode":"text","delay":300,"topic":"","x":270,"y":100,"wires":[[]]},{"id":"b5f040f.26fa6c","type":"ui_text_input","z":"86829614.e78918","name":"Hint 2","label":"Hint 2","tooltip":"tooltip","group":"9bce1c47.a279c","order":11,"width":"24","height":"2","passthru":true,"mode":"text","delay":300,"topic":"","x":270,"y":160,"wires":[[]]},{"id":"d5161954.eb33c","type":"ui_text_input","z":"86829614.e78918","name":"Hint 3","label":"Hint 3","tooltip":"tooltip","group":"9bce1c47.a279c","order":12,"width":"24","height":"2","passthru":true,"mode":"text","delay":300,"topic":"","x":270,"y":220,"wires":[[]]},{"id":"27667717.864ae8","type":"ui_text_input","z":"86829614.e78918","name":"Antwoord","label":"Antwoord","tooltip":"tooltip","group":"9bce1c47.a279c","order":13,"width":"24","height":"2","passthru":true,"mode":"text","delay":300,"topic":"","x":280,"y":280,"wires":[[]]},{"id":"7d61bf28.0d4e7","type":"ui_dropdown","z":"86829614.e78918","name":"Audio theme select","label":"Audio theme","tooltip":"Selecteer audio thema","place":"Select option","group":"9bce1c47.a279c","order":16,"width":"5","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":310,"y":340,"wires":[[]]},{"id":"6a6d18c2.55c75","type":"ui_dropdown","z":"86829614.e78918","name":"Audio hint select","label":"Audio hint","tooltip":"Selecteer audio hint","place":"Select option","group":"9bce1c47.a279c","order":18,"width":"5","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":310,"y":400,"wires":[[]]},{"id":"3ac1ae80.a193a2","type":"ui_dropdown","z":"86829614.e78918","name":"Audio background select","label":"Audio background","tooltip":"Selecteer audio background","place":"Select option","group":"9bce1c47.a279c","order":22,"width":"5","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":330,"y":460,"wires":[[]]},{"id":"c7407d1f.a310a8","type":"ui_dropdown","z":"86829614.e78918","name":"game template select","label":"template","tooltip":"Selecteer game template","place":"Select option","group":"9bce1c47.a279c","order":7,"width":"8","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":320,"y":40,"wires":[[]]},{"id":"958d06af.88e83","type":"ui_button","z":"86829614.e78918","name":"stop theme","group":"9bce1c47.a279c","order":15,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":830,"y":340,"wires":[[]]},{"id":"2662a1ae.e9c536","type":"ui_button","z":"86829614.e78918","name":"play theme","group":"9bce1c47.a279c","order":14,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":610,"y":340,"wires":[[]]},{"id":"4c8c11fd.0f22b","type":"ui_button","z":"86829614.e78918","name":"stop hint","group":"9bce1c47.a279c","order":20,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":820,"y":400,"wires":[[]]},{"id":"898dc98d.7f31e","type":"ui_button","z":"86829614.e78918","name":"play hint","group":"9bce1c47.a279c","order":19,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":600,"y":400,"wires":[[]]},{"id":"bcf87f77.df5418","type":"ui_button","z":"86829614.e78918","name":"stop background","group":"9bce1c47.a279c","order":24,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-stop","payload":"stop","payloadType":"str","topic":"","x":850,"y":460,"wires":[[]]},{"id":"b76869f4.5aeb88","type":"ui_button","z":"86829614.e78918","name":"play background","group":"9bce1c47.a279c","order":23,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-play","payload":"play","payloadType":"str","topic":"","x":630,"y":460,"wires":[[]]},{"id":"c30a04ef.30a83","type":"ui_slider","z":"86829614.e78918","name":"theme volume","label":"slider","tooltip":"","group":"9bce1c47.a279c","order":17,"width":"5","height":"1","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":1060,"y":340,"wires":[[]]},{"id":"13367898.686ccf","type":"ui_slider","z":"86829614.e78918","name":"hint volume","label":"slider","tooltip":"","group":"9bce1c47.a279c","order":21,"width":"5","height":"1","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":1050,"y":400,"wires":[[]]},{"id":"511a0383.04e3dc","type":"ui_slider","z":"86829614.e78918","name":"background volume","label":"slider","tooltip":"","group":"9bce1c47.a279c","order":25,"width":"5","height":"1","passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":1,"x":1080,"y":460,"wires":[[]]},{"id":"d6412814.1015a8","type":"ui_dropdown","z":"86829614.e78918","name":"next step select","label":"next step","tooltip":"Volgende stap","place":"Select option","group":"9bce1c47.a279c","order":8,"width":"8","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":560,"y":40,"wires":[[]]},{"id":"60bd4ec6.d7cb58","type":"ui_switch","z":"86829614.e78918","name":"","label":"Show timer?","tooltip":"Timer zichtbaar?","group":"9bce1c47.a279c","order":26,"width":"6","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":310,"y":560,"wires":[[]]},{"id":"3e7c101e.64f8c8","type":"ui_switch","z":"86829614.e78918","name":"","label":"Final step","tooltip":"Laatste opdracht","group":"9bce1c47.a279c","order":27,"width":"6","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":300,"y":620,"wires":[[]]},{"id":"c95cb0b.77c82d","type":"ui_dropdown","z":"86829614.e78918","name":"photo function","label":"photo","tooltip":"Foto functie","place":"Select option","group":"9bce1c47.a279c","order":9,"width":"8","height":"1","passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":780,"y":40,"wires":[[]]},{"id":"9c7b2bdb.782ba8","type":"ui_button","z":"86829614.e78918","name":"save","group":"9bce1c47.a279c","order":1,"width":"4","height":"1","passthru":false,"label":"SAVE","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"save","payloadType":"str","topic":"","x":250,"y":700,"wires":[[]]},{"id":"347da4f1.57c8f4","type":"ui_button","z":"86829614.e78918","name":"new","group":"9bce1c47.a279c","order":2,"width":"4","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"NEW","payloadType":"str","topic":"","x":410,"y":700,"wires":[[]]},{"id":"6c10604e.38b18","type":"ui_button","z":"86829614.e78918","name":"save","group":"9bce1c47.a279c","order":3,"width":"4","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"Load","payloadType":"str","topic":"","x":570,"y":700,"wires":[[]]},{"id":"8ce5495e.848df","type":"ui_button","z":"86829614.e78918","name":"save","group":"9bce1c47.a279c","order":4,"width":"4","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"save","payloadType":"str","topic":"","x":710,"y":700,"wires":[[]]},{"id":"81a36e21.a4f2a","type":"ui_button","z":"86829614.e78918","name":"save","group":"9bce1c47.a279c","order":5,"width":"4","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"save","payloadType":"str","topic":"","x":850,"y":700,"wires":[[]]},{"id":"4983e150.378938","type":"ui_button","z":"86829614.e78918","name":"save","group":"9bce1c47.a279c","order":6,"width":"4","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-save","payload":"save","payloadType":"str","topic":"","x":990,"y":700,"wires":[[]]},{"id":"9bce1c47.a279c","type":"ui_group","z":"","name":"Controls","tab":"ddfa73a0.7527c","order":1,"disp":true,"width":"24","collapse":false},{"id":"ddfa73a0.7527c","type":"ui_tab","z":"","name":"Game play screen","icon":"fa-cogs","order":1,"disabled":false,"hidden":false}]

```

Thanks!

---

<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:** [11 November 2019 23:23 UTC](https://discourse.nodered.org/t/dashboard-small-button-alignment/17811/6 "2019-11-11T23:23:14Z")

</div>

K . Will have a look when I get to computer