# How to change the look of ui-dropdown

**URL:** https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151
**Category:** Dashboard
**Created:** [1 November 2020 08:35 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151 "2020-11-01T08:35:41Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ellerre](https://avatars.discourse-cdn.com/v4/letter/e/eb9ed0/32.png) [@ellerre](https://discourse.nodered.org/u/ellerre)
#### Post date: [1 November 2020 08:35 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151/1 "2020-11-01T08:35:41Z")

</div>

As usually, I need an help!  
I'm using tables and ui-dropdown to generate the structure of my home:

- floor:room = ground floor:kitchen; first floor:bathroom (...)  
and the same technique to match elements (such as sockets, lights, sensors, etc.) to the rooms.

Data are stored in SQLite, a, and the procedure works correctly.

The problem is only "aesthetic"...!

[ui-dropdown|433x500](https://discourse.nodered.org/uploads/short-url/ibDhj2Gm7oRRPrN4FJL4C1XbN3Z.png)

In the dropdown , is it possible to decrease the spacing between the elements of the list, the background color and add a frame?  
I had no major problems with the table. I changed the CSS: .tabulator-header { font-size: 13px !important; }.  
Unfortunately I failed with the ui-dropdown

LR

---

<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: [1 November 2020 09:26 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151/2 "2020-11-01T09:26:28Z")

</div>

I don't know the answer to your question, but could you correct the thread subject please, there is a bit of typo there 🙂

---

<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: [1 November 2020 09:31 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151/3 "2020-11-01T09:31:43Z")

</div>

Here's the starting point for you 🙂

```auto
[{"id":"ef6a72c1.f7444","type":"ui_template","z":"9038de34.04db3","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .nr-dashboard-theme md-select-menu md-option {\n background-color: #333333;\n color: #eeeeee;\n height:24px;\n }\n .nr-dashboard-theme md-select-menu md-option:nth-child(even) {\n background-color: #3c3c3c;\n }\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":520,"wires":[[]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

```auto
<style>
   .nr-dashboard-theme md-select-menu md-option {
        background-color: #333333;
        color: #eeeeee;
        height:24px;
    }
    .nr-dashboard-theme md-select-menu md-option:nth-child(even) {
        background-color: #3c3c3c;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![ellerre](https://avatars.discourse-cdn.com/v4/letter/e/eb9ed0/32.png) [@ellerre](https://discourse.nodered.org/u/ellerre)
#### Post date: [1 November 2020 11:16 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151/4 "2020-11-01T11:16:20Z")

</div>

Grazie mille!  
Thanks for your help!

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [1 December 2020 11:16 UTC](https://discourse.nodered.org/t/how-to-change-the-look-of-ui-dropdown/35151/5 "2020-12-01T11:16:28Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.