Can't change the height of dropdowns

Dash Python
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

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:

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

2 Likes
10

Also wanted to put my solution, because adding ‘inline-block’ to the style component of the dcc.dropdown did change the height too, but the cross and the arrow disappeared , I ended up using display : flex and the next styling components to show everything, hope it helps too!

style = {'height': '30px', 'display': 'flex', 'justify-content': 'flex-end', 'flex-direction': 'row', 'align-items': 'center'}

and with the code of yante in my css file , accomplished what I wanted:)

11

This was the best option for my issue as well.
For example:

dcc.Dropdown(id = 'phenotype-dropdown', 
             placeholder = "Select a phenotype of interest",
             options = [{"label" : str(i),
                         "value" : str(i)} for i in phenotypes],
             optionHeight = 75)