Adjust width of dropdown menu option in Dash-Plotly

user_6728100 0
Viewed 15590

I am trying to build an app using Dash in Python based on Plotly. I am having hard time in adjusting the width of Dropdown menu options. I have attached code and image below. I would like the width of Dropdown options to be same as the menu width.

enter image description here

app.layout = html.Div(children=[
    html.H1(children='Welcome to Portfolio Construction Engine!'),
    html.Div(children='What would you like to do?', style={
        'font-style': 'italic',
        'font-weight': 'bold'
    }),
    html.Div([
        dcc.Dropdown(
            id='demo-dropdown',
            options=[
                {'label': 'Upload Scores', 'value': 'upload_scores'},
                {'label': 'Analyze Portfolios', 'value': 'analyze_portfoliio'},
                {'label': 'Generate Data for IC Engine', 'value': 'gen_data_ic_engine'}
            ],
            placeholder='Select a task...',
            style={
                'width': '50%'
            }
        ),
        html.Div(id='dd-output-container')
    ])
])
plotly-dash python
1 Answers

While its correct to place width: 50% to change the width of the dropdown component, you've placed it in the inner component rather than the parent Div.

app.layout = html.Div(
    children=[
        html.H1(children="Welcome to Portfolio Construction Engine!"),
        html.Div(
            children="What would you like to do?",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div(
            [
                dcc.Dropdown(
                    id="demo-dropdown",
                    options=[
                        {"label": "Upload Scores", "value": "upload_scores"},
                        {"label": "Analyze Portfolios", "value": "analyze_portfoliio"},
                        {
                            "label": "Generate Data for IC Engine",
                            "value": "gen_data_ic_engine",
                        },
                    ],
                    placeholder="Select a task...",
                    # style={"width": "50%"},  NOT HERE
                ),
                html.Div(id="dd-output-container"),
            ],
            style={"width": "50%"},
        ),
    ]
)
user_105319960
Related