python - 在 Dash-Plotly 中调整下拉菜单选项的宽度

Question

我正在尝试基于 Plotly 在 Python 中使用 Dash 构建一个应用程序。我很难调整下拉菜单选项的宽度。我在下面附上了代码和图片。我希望下拉选项的宽度与菜单宽度相同。

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')
    ])
])

Answer 1

虽然正确放置 width: 50%要更改下拉组件的宽度，您已将其放置在内部组件而不是父 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%"},
        ),
    ]
)