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

Dash
#1

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)

image
image.png954×380 6.76 KB

Dcc.dropdown change height
#2

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!

#3

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

#4

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

#5

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

More CSS attributes here.

#6

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

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

#8

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
#9

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