Styling Dash Core Components

Dash Python
1

How can I reduce the pixel size of dash dropdown component from 36px?

2

Hey AZAM,
by clicking the web inspector in your browser, you can see the different classes of your dropdown.
Adding a custom css -sheet in your assets folder with changes made to the corresponding classes will update the style of your dropdown. Here is how to include a css sheet: https://dash.plotly.com/external-resources

1 Like
3

hi @AZAM
:wave: welcome to the community.
Are you referring to reducing the pixel size of the dropdown options, so that the font size is smaller?

If so, you should be able to do this:
dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='demo-dropdown', style={"fontSize":10}),

1 Like
4

Hello AZAM,
There are good answers before. I made next component:

dcc.Dropdown(
    options=['A', 'B', 'C'], 
    value='A', id='demo', 
    placeholder='Choose', 
    style={'height': 20, 'fontSize': 16})

You can move placeholder or selected text by using CSS. For example add some paddings to your custom.css file in /assets folder:

.Select-value {
    padding-top: 5px;
}

.Select-placeholder {
    padding-top: 5px;
}
1 Like
5

hi @TemaTorg
:wave: welcome to the community.

Thank you for sharing your solution.

1 Like