How do I specify width of my dropdown ?

[harxish]

I want my dropdown to be a fixed width and also set the items in the dropdown to certain font and size. How do I achieve this ?

Looking at the docs I was able to be see an argument called class but there was no proper definition on what that is.

[harxish]

I have my DropDown inside a div like this,

html.Div([
    sd_material_ui.DropDownMenu(id='job', options=self.option2[::-1], autoWidth=True, labelText='Select one or more Event(s)', value=self.jobs, multiple=True, variant='outlined')
],
style={'width': '32%', 'padding-left': '1%'}),

But neither it takes the width of the div nor the width stays inside the div.

[coralvanda]

The classes can be used like this:

classes=dict(
    root='my-class'
 ),

And then you can use a CSS file to define what styles to use for it, like:

my-class {
    width: 32%;
}

[harxish]

It doesn't work... the CSS should be inside assets/styles.css ryt ?

[harxish]

It's like this, a very small box. As I select options the size grows and moves out of the div.

[coralvanda]

Yes, assets/styles.css. Did the component take on the correct class name you specified, and did those styles from the CSS file attach correctly? If so, you might need to play around a bit with something like

my-class {
  min-width: 32%;
  max-width: 32%;
}

or some other possibilities. If the class or styles didn't come through correctly, though, then that's something else entirely.

[harxish]

No nothing happens :(

this is my sample code

import dash
import dash_html_components as html

import sd_material_ui

my_app = dash.Dash()

options = [{"primaryText": "option 1", "value": 1}, {"primaryText": "option 2", "value": 2}, {"primaryText": "option 3", "value": 3}, {"primaryText": "option 4", "value": 4}]

my_app.layout = html.Div([
    html.H1('DropDown Experiment'),
    sd_material_ui.DropDownMenu(id='job-type3', options=options, value=[], multiple=True, variant='standard', classes=dict(root='my-class'))
])

if __name__ == '__main__':
    my_app.run_server()

This is my css in assets/styles.css

my-class {
    min-width: 32%;
    max-width: 32%;
}  

Nothing happens whatever I change in my CSS :(

[coralvanda]

If you use the developer tools to inspect the dropdown, does it show the my-class class name? Does that element have the values you set in the CSS?

If not, would you share your project structure? It's possible that Dash isn't finding that styles.css file.

[harxish]

This is the classname MuiSelect-root my-class MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input. It doesn't have the values specified in the CSS. This is the project structure...

- experiment.py
- assets/
    |-- styles.css

[harxish]

I would also add that when I tried to add css for dash it worked fine.

[coralvanda]

Oh, it was supposed to be .my-class and not my-class because it's targeting a class name. I tried this locally, and the styles hooked up, although it still probably doesn't look the way you want. You'll have to play around with them a bit to get it right, but this should at least let you start working on that.