Dropdown Values Sizes

Dash Python
1

Hello There,

I have build an application using Dash, and i have a dropdown values with a long text, i don’t want to change the size of the dropdown component itself, i wonder if i can change the style so i can make padding between values, so it looks readable.

Screenshot 2024-03-18 135947

Thanks !

2

You don’t want to increase the width of the dropdown component. Is increasing the width of the opened drop down an option?

image

If so, you could add css to the concerning dropdown.

from dash import Dash, html, dcc


app = Dash(
    __name__,
    external_stylesheets=[
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
    ]
)

app.layout = html.Div(
    [
        html.Div(
            className='col-2',
            children=dcc.Dropdown(
                options=[
                    {'label': 'looooooooooooooooooooooooooooooooong text', 'value': 1},
                    {'label': 'short text', 'value': 2}
                ],
                className='wideDrop'
            )
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True)

custom.css:

.wideDrop .Select-menu-outer {
     width: 400px;
}
1 Like
3

Would it be possible for you to post a short code example that exhibits this overwriting behaviour?

The code that AIMPED has provided doesn’t exhibit this overwriting, even if the dropdown box is kept narrow, so I’m unsure what exactly does.

4

Yes, I had the same thought. I wasn’t able to reproduce the issue.

5

I’m sorry , could you elaborate more!

I just have a pre-defined values that turned to be long.

6

In the image you posted, it looks like the text for the first entry overwrites the text for the second entry when it word-wraps, and it looks all wrong. (Is that what the image shows?). But with the code that AIMPED posted, if the dropdown is kept narrow (by not using the CSS) then the first entry word-wraps but it does not overwrite the second entry - everything looks fine (well, nearly - the very long word doesn’t wrap but overflows its box. But that’s not what your problem seems to be).

So it looks like it must be something more than just long values.

1 Like