Plotly dash dropdown boarder 没有按预期出现

Posted 2023-02-18

【中文标题】Plotly dash dropdown boarder 没有按预期出现

【英文标题】：Plotly dash dropdown boarder not coming as expected

【发布时间】：2021-09-14 09:39:47

【问题描述】：

我正在创建一个带有下拉菜单的 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'
                                      
                
)

【问题讨论】：

看起来您正在设置外部 div 的样式，而不是下拉菜单。

我是 Dash 的新手。如果您不介意，请告诉我如何设置下拉菜单的样式。

【参考方案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'          
                    
            )])

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

【讨论】：

是的，我收到错误 .style= ^ SyntaxError: invalid syntax

现在应该全部设置好了。经过测试。