Black Lives Matter. Please consider donating to Black Girls Code today.

Dash dropdown cuts text

Hello,

I have a dcc.dropdown object in my app ; very useful, however, it tends to cut the values that are too long, even though there is space to display them. Any idea what the issue could be?

My code is as follows:

html.Div([html.H1(children='2.',
                          className="drop-zone-h1"),
                  dcc.Dropdown(id='category-col-selection-dropdown',
                               options=[],
                               placeholder="Select category column",
                               className="drop-zone-dropdown"
                               )],
                 className="drop-zone-columns"),

With:

.drop-zone-columns {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    margin: 1rem;
}

.drop-zone-dropdown {
    color: #fff;
    margin: 1rem;
    font-size: 1.428571rem !important;
    font-family: SourceSansProSemiBold;
    /*width:380px*/
}

Any idea how I may change this?