在虚线-插图中调整下拉菜单选项的宽度

问题描述

我正在尝试建立一个应用程序使用Dash在Python的基础上Ploly。我在调整下拉菜单选项的宽度时遇到了困难。我附上了下面的代码和图像。我希望下拉选项的宽度与菜单的宽度相同。

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

---

解决方案

放置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%"},
        ),
    ]
)