CODEWITHSUNDEEP
cssplotly-dash
Vincent
Vincent

Reputation: 530

Dash typed text style in a dropdown

I am using a dcc.dropdown for Dash my app and I have changed the styling. I also managed to change the background and the color of the text in the dropdown options. However, I can't seem to change the styling of the text that one can type in the dropdown menu (which is also a very useful way of entering a new value). Any idea on how I could manage this?

Dash HTML:

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"
),

CSS:

.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*/
}

Upvotes: 4

Views: 9584

Answers (1)

horseshoe
horseshoe

Reputation: 1477

One way would be to use "font-size" in the style of the Div

html.Div([dcc.Dropdown(id="component_id",
                       options=[{'label': val, 'value': val} for val in mylist],
                                value=value,
                                style ={'backgroundColor': "#ffffff",
                                        'width':'20vH','height':'40px'})
                        ],className = '...',
                        style={'height':height,
                               'margin-top':   '0px',
                               'margin-left':  '10px',
                               'font-size': '12px'})

Upvotes: 2

Related Questions