Plotly dash 下拉框没有按预期出现

Question

我正在创建一个带有下拉菜单的 Plotly 破折号。我正在为下拉菜单提供边框。我有一个主标题。我需要在带有框的主标题之后出现下拉菜单。请在下面查看我的代码。

现在，我的边框也覆盖了我的主标题。我不需要那个。我只需要下拉部分的边框。请看我目前情况的附图。

请问我错在哪里

fig_dropdown = html.Div([
    
    html.Div(html.H1(children="TEST SUIT1"),style={'textAlign': 'center','color': '#5742f5', 'fontSize': 20}),
    
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )], style= { 
                 
                 'border': '#eb345b',    
                 'color': '#5e34eb',
                 'borderStyle':'dashed',
# #                  'width': '50%',                  
                 'font-size': '20px'
                                      
                }
)

Answer 1

我没有渲染它，但是将下拉菜单包装在 div 中，然后在那里应用样式可能会为您提供所需的内容。从您的示例中，您正在将样式应用于第一个 html.Div()

fig_dropdown = html.Div([
    html.Div(
        html.H1(children="TEST SUIT1"),
        style={
            'textAlign': 'center',
            'color': '#5742f5', 
            'fontSize': 20}),
    html.Div(
        dcc.Dropdown(
            id='fig_dropdown',
            options=[{'label': x, 'value': x} for x in fig_names],
            value=None
            ), style= {              
                    'border': '#eb345b',    
                    'color': '#5e34eb',
                    'borderStyle':'dashed',
                    # 'width': '50%',                  
                    'font-size': '20px'          
                    }
            )])

编辑：我自己把样式放在了错误的位置。 :)

Plotly dash 下拉框没有按预期出现

Plotly dash dropdown boarder not coming as expected

html

css

python

plotly

plotly-dash