Dcc.dropdown change height

Dash Python
1

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.

2

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.

2 Likes
3

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',
    },
1 Like
4

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
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:

20%20PM
Screen Shot 2018-12-30 at 12.38.20 PM.png716×390 22.6 KB

Hope this works for you.

5

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
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)
6

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:)

7

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',
                    }
)
1 Like
8

@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

9

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

10

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

11

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

.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:

#your-specific-id .Select-input{
    ...
}
4 Likes
12

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);
}
1 Like