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.

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 .

Hope this makes helps.

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',
              
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:
Screen Shot 2018-12-30 at 12.36.56 PM.png898×102 4.7 KB
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:
Screen Shot 2018-12-30 at 12.38.20 PM.png716×390 22.6 KB
Hope this works for you.
              
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
Screenshot 2018-12-30 12.18.47.png2570×236 17.6 KB
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)
              
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:)
              
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',
              
@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
              
It seems you just need to put the “display: inline” in the right place.

I shared the solution to your post.

Thanks
Note, this will set all dropdowns. To set a specific dropdown use:
#your-specific-id .Select-input{
              
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’.
@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);