As the title states, the callbacks change the layout of the page. It’s not that it always changes but it does sometimes and I’m not really sure what is causing it.

Upon initial load, the layout is as it should be where you have the graph_content in one row and in the next row having the table_content. However, when changing selector1 or selector2 (which are dropdowns), sometimes table_content is on top of graph_content.

I have:

@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