Search code examples
plotly-dash

Adjust height of dropdown menu option in Dash-Plotly?

I have a dash dropdown (dcc.Dropdown) created using the code;

                    style={"display": "flex", "align-items": "center"},
                    children=[
                        dcc.Dropdown(
                            options=[<list of options that are bit longer sentences>],
                            value="How good are teaching staff at explaining things?",
                            id="questions_dropdown",
                            style={"width": "100%", "max-width": "300px", "display": "block"}
                        )
                    ]
                )

How do I fix the overlapping problem? Showing the option in two lines are fine (If possible showing in the same line is also fine as long as it is just the area of options that extend in width).

enter image description here

Solution

  • I used optionHeight as in the code below;

    dcc.Dropdown(
    ['New York City', 'Montreal', 'Paris', 'London', 'Amsterdam', 'Berlin', 'Rome'],
    'Paris', id='option-height-example-dropdown', optionHeight=50
)

    Not Ideal, because some options need small space but others need more space. But this is what I have now.