回调时页面布局发生变化

Question

正如标题所述，回调会更改页面的布局。并不是说它总是会改变，但有时会改变，我不太确定是什么导致了它。

初始加载时，布局应该是这样的，一行中有 graph_content，下一行有 table_content。但是，当更改选择器 1 或选择器 2（下拉菜单）时，有时 table_content 位于 graph_content 之上。

我有：

@callback(
Output('content', 'children'),
Input('stored-data', 'data'),
Input('selector1', 'value'),
Input('selector2', 'value')
)
def content(data, selector1, selector2)
    #some code here to do filter the data

    graph_content = dbc.Row([
            dbc.Col(dcc.Graph(figure = fig_bar, responsive=True), width = 8), 
            dbc.Col(dcc.Graph(figure = fig_tree, responsive=True), width = 4)
        ])
    
    table_content = dbc.Row([
            dbc.Col(
                dash_table.DataTable(
                    columns = [{'groupname': col, 'id': col} for col in ['country', 'size', 'industry']], 
                    data = unique_data.to_dict('records'), 
                    style_cell = {'color': palette.deep_blue}), width = 4)
                ])
    
    content_layout = html.Div([dbc.Row(graph_content), 
                               dbc.Row(table_content)])

    return content_layout
              

                      

Answer 1

TL；博士

尝试将

content_layout

更新为：

content_layout = dbc.Container([graph_content, table_content])

说明

如Dash Bootstrap 组件文档中所述：

为了获得最佳效果，请确保在使用时遵守以下两条规则： 构建您的布局：

1. 仅在容器内使用 Row 和 Col。单个集装箱包装 你的整个应用程序的内容都很好。 [...]
2. 任何 Row 组件的直接子组件应该 始终是 Col 组件。您的内容应该放在 Col 内 组件。

您发布的代码片段违反了上面的两条规则，因为：

1. content_layout

   将

   dbc.Row

   列表直接包装到

   html.Div

   而不是

   dbc.Container

   。

2. dbc.Row

   并不严格包含

   dbc.Col

   对象；

   graph_content

   和

   table_content

   已经是

   dbc.Row

   对象，但是

   content_layout

   将它们再次包装在

   dbc.Row

   对象中。

免责声明：我无法测试这是否修复了您观察到的布局问题，因为代码 sinppet 不是一个最小的工作示例，但我将首先应用这些更改来查看它们是否解决了您的问题。