# Dcc.dropdown change height

**URL:** <https://community.plotly.com/t/dcc-dropdown-change-height/17464>\
**Category:** Dash Python\
**Created:** [December 29, 2018, 5:53pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464 "2018-12-29T17:53:25Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjonen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bjonen/32/4925_2.png) [@bjonen](https://community.plotly.com/u/bjonen)\
**Post date:** [December 29, 2018, 5:53pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/1 "2018-12-29T17:53:25Z")

</div>

Dear all,

I have tried reducing the height on a dcc.dropdown. While this seems to change the height of the container, the dropdown element stays the same height and simply overlaps the container.

Is there a way to set or get the height of a dcc.dropdown element?

I would ultimately like to place a text container of the same height next to the dropdown menu.

---

<div class="post-metadata">

**Author:** ![eliasdabbas](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eliasdabbas/32/30337_2.png) [@eliasdabbas](https://community.plotly.com/u/eliasdabbas)\
**Post date:** [December 29, 2018, 11:38pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/2 "2018-12-29T23:38:22Z")

</div>

Not sure what you tried, but you can change the dropdown’s `style` attribute with a dictionary containing the desired CSS that you want.

For example:

`dcc.Dropdown(id='id', style={'height': '30px', 'width': '100px'})`

You can find more [CSS attributes here](https://www.w3schools.com/css/css_dropdowns.asp).

Hope this makes helps.

---

<div class="post-metadata">

**Author:** ![bjonen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bjonen/32/4925_2.png) [@bjonen](https://community.plotly.com/u/bjonen)\
**Post date:** [December 30, 2018, 9:48am UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/3 "2018-12-30T09:48:04Z")

</div>

Thanks for your reply! Extending the size of the dropdown actually works as you mentioned. experimented a bit more and it seems that I cannot reduce the height below ~35px. I also tried setting min-height to 0px which doesn’t have an effect.

The dropdown style looks like this

```
style={
    'height': '2px', 
    'width': '100px', 
    'font-size': "50%",
    'min-height': '1px',
    },
```

---

<div class="post-metadata">

**Author:** ![eliasdabbas](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eliasdabbas/32/30337_2.png) [@eliasdabbas](https://community.plotly.com/u/eliasdabbas)\
**Post date:** [December 30, 2018, 10:42am UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/4 "2018-12-30T10:42:19Z")

</div>

I think you should watch out for the combinations of CSS attributes that you are using. Some might cancel others, and sometimes their interactions produce different results. I think it’s best to try them in isolation and see what works.

I just tried to reduce height to 5px and it seems to work:

 ![56%20PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/d9f55ac955efbe07eed982ae32b537cf952ae6ad.png)

The space after ‘stopwords’ is actually a dropdown, and has a height of 5px. The space after “Separator” is a and “Input” field with default height.

The dropdown actually works and displays the options when clicked, but it’s obviously a terrible user experience:

 ![20%20PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8e1d58c61b35ae98066baed60c391797cf71fe58.png)

Hope this works for you.

---

<div class="post-metadata">

**Author:** ![bjonen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bjonen/32/4925_2.png) [@bjonen](https://community.plotly.com/u/bjonen)\
**Post date:** [December 30, 2018, 11:22am UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/5 "2018-12-30T11:22:43Z")

</div>

Hm I don’t see what’s going on. When I run the below code, the dropdown is not resizing. There is `assets` directory. So I do not see any further CSS being injected.

dash 0.35.0  
dash\_core\_componenrts 0.41.0

 ![47](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8fb5f78cbbb439135ef005dd9ba74e31b3048098.png)

```
import dash
import dash_core_components as dcc
import dash_html_components as html

print(dash. __version__ )
print(dcc. __version__ )

app = dash.Dash()
app.layout = dcc.Dropdown(id='id', style={'height': '5px'})

if __name__ == ' __main__':
    app.run_server(host='0.0.0.0', port='8050', debug=True)
```

---

<div class="post-metadata">

**Author:** ![eliasdabbas](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eliasdabbas/32/30337_2.png) [@eliasdabbas](https://community.plotly.com/u/eliasdabbas)\
**Post date:** [December 30, 2018, 1:11pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/6 "2018-12-30T13:11:10Z")

</div>

Strange, I also got the same issue, but I was able to find a solution.

I put the dropdown inside an `html.Div`, and added `display':'inline-block'` to the `style` dictionary, and it worked.

Sorry I’m not a CSS expert:)

---

<div class="post-metadata">

**Author:** ![bjonen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/bjonen/32/4925_2.png) [@bjonen](https://community.plotly.com/u/bjonen)\
**Post date:** [December 30, 2018, 4:48pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/7 "2018-12-30T16:48:40Z")

</div>

Applying ‘disply’: ‘inline-block’ directly to the dropdown style has an effect for me. The wrapper does not change anything. I am a bit concerned about the side-effects of setting inline-block on the dropdown and would love to understand what is going on. But anyway, thanks for the workaround!

```
app.layout = dcc.Dropdown(id='id', 
                style={
                        'height': '5px',
                        'display': 'inline-block',
                    }
)
```

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [January 3, 2019, 5:20pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/8 "2019-01-03T17:20:30Z")

</div>

@eliasdabbas, I’m also having a simmilar issue. I followed your instructions, but when I change the “height” style property, my dropdowns don’t change size and they end up overlapping. Do you know what is going on in my case?

My community post: [Can't change the height of dropdowns](https://community.plotly.com/t/cant-change-the-height-of-dropdowns/17575)

---

<div class="post-metadata">

**Author:** ![eliasdabbas](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eliasdabbas/32/30337_2.png) [@eliasdabbas](https://community.plotly.com/u/eliasdabbas)\
**Post date:** [January 3, 2019, 9:09pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/9 "2019-01-03T21:09:19Z")

</div>

It seems you just need to put the “display: inline” in the right place.  
I shared the solution to your post.  
Thanks

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [January 3, 2019, 10:36pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/10 "2019-01-03T22:36:02Z")

</div>

Yes, I just saw your post. It works now. Much appreciated.

---

<div class="post-metadata">

**Author:** ![betontalpfa](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/betontalpfa/32/15976_2.png) [@betontalpfa](https://community.plotly.com/u/betontalpfa)\
**Post date:** [August 12, 2021, 12:37pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/11 "2021-08-12T12:37:13Z")

</div>

Use the following three css to set the height a dash Dropdown

```css
.Select-input{
    height: 25px;
}

.Select-control{
    height: 27px;
}

.Select-placeholder{
    line-height: 25px;
}

```

Note, this will set all dropdowns. To set a specific dropdown use:

```css
#your-specific-id .Select-input{
    ...
}

```

---

<div class="post-metadata">

**Author:** ![DwilliamsTM](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@DwilliamsTM](https://community.plotly.com/u/DwilliamsTM)\
**Post date:** [February 14, 2024, 11:42pm UTC](https://community.plotly.com/t/dcc-dropdown-change-height/17464/12 "2024-02-14T23:42:20Z")

</div>

So, I’m using dash bootstrap components so I’m not sure how similar it is to DCC, however, I discovered that the issue was the nesting of buttons inside the dropdown. When I inspected the dropdown element, all of my amendments were in a higher section, , with inside it. Turns out, you can make your own size option for both button and dropdown. Just copy the section related to a size of dropdown and a size of button and amend the parts you want to change. The following is my code for size ‘title’.

```auto
@media (min-width: 768px) {
  .dropdown-menu-title-start {
    --bs-position: start;
  }
  .dropdown-menu-title-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-title-end {
    --bs-position: end;
  }
  .dropdown-menu-title-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}

.btn-title, .btn-group-title > .btn {
  --bs-btn-padding-y: 0rem;
  --bs-btn-padding-x: 0rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

```