Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Can't change the height of dropdowns

I’m trying to change the height of dropdown components that are grouped together. I searched the forum and found this post: Dcc.dropdown change height, but I’m still having issues: The dropdowns are not changing, rather they are just getting overlapped.

Here is a minimal example with screenshot:

import dash
import dash_html_components as html
import dash_core_components as dcc

dropdown_options = [
            {'label': 'foo', 'value': 'foo'},
            {'label': 'bar', 'value': 'bar'},
            {'label': 'baz', 'value': 'baz'}] 

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div(
        id="dropdown-container",
        children=[
            dcc.Dropdown(
                options=dropdown_options,
                value='foo',
                style={'height': '15px'}
                ),
            dcc.Dropdown(
                options=dropdown_options,
                value='foo',
                style={'height': '15px'}
                ),
            ],
        style={'display': 'inline-block'})    
])

app.run_server(debug=True)

The 'display': 'inline-block' should be part of each element (in the same dictionary where you define heights) dcc.Dropdown in this case.

Just confirmed with this code, and it seems to work for me:

import dash
import dash_html_components as html
import dash_core_components as dcc

dropdown_options = [
            {'label': 'foo', 'value': 'foo'},
            {'label': 'bar', 'value': 'bar'},
            {'label': 'baz', 'value': 'baz'}]

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div(
        id="dropdown-container",
        children=[
            dcc.Dropdown(
                options=dropdown_options,
                value='foo',
                style={'height': '15px', 'display': 'inline-block'}
                ),
            dcc.Dropdown(
                options=dropdown_options,
                value='foo',
                style={'height': '15px', 'display': 'inline-block'}
                ),
            ],
        )
])

if __name__ == '__main__':
    app.run_server(debug=True)

05%20PM

Hope that works for you!

Yes that clarifies a lot, thanks! CSS can be such a pain :weary:

Do you know how to change the line-height inside of the dropdown?

For instance, when I change the dropdown height, it keeps the value inside anchored at the bottom, but I would rather prefer it be centered.

For example, the item below is on the bottom of the dropdown:
image

{"vertical-align": "middle"} should do it.

More CSS attributes here.

It’s not changing the vertical alignment :frowning:

It looks like the div.Select-value attribute is overriding the text position. I don’t see this in any of my css sheets so I can only guess that this is part of the react rendering.

1 Like

It might be a React thing, or maybe a certain combination of CSS attributes, one of which might be cancelling the other. Not sure, sorry:)

For anyone who might come across the line-height issue in the future, I solved it by adding the following to my custom CSS file:

.Select--single>.Select-control .Select-value, .Select-placeholder 
{
    line-height: 20px;
}

Doing some digging with the inspect mode of your browser brings out a lot of secrets. Hope it helps! :wink:

2 Likes

I prefer the optionHeight property. Doesn’t require you to go into css and it is less buggy from my experience.

Sorry, I probably should’ve updated this thread…I completely forgot about it :grimacing:

1 Like