facultyai / dash-bootstrap-components

Bootstrap components for Plotly Dash
https://dash-bootstrap-components.opensource.faculty.ai/
Apache License 2.0
1.11k stars 220 forks source link

flicker on 2 graphs #1051

Closed kaern closed 5 hours ago

kaern commented 6 hours ago

Can anybody tell why this simple layout with 2 rows 2 cols each and graphs inside, move slight to the left upon loading ?

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row([
            dbc.Col(html.H3("Something", className="mb-3"), width=4),
            dbc.Col(dcc.Graph(), width=8),      
        ], className="mb-5"),
        dbc.Row([
            dbc.Col(html.H3("Something", className="mb-3"), width=4),
            dbc.Col(dcc.Graph(), width=8),      
        ], className="mb-5"),
    ], 
fluid=False,
className="dbc dbc-ag-grid"
)

if __name__ == '__main__':
    app.run_server(debug=True)
kaern commented 5 hours ago

it was a scrollbar issue..

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    style={
        "height": "100vh",  
        "overflowY": "scroll",  
    },
    children=[
        dbc.Container(
            [
                dbc.Row([
                    dbc.Col(html.H3("Something", className="mb-3"), width=4),
                    dbc.Col(dcc.Graph(style={"height": "350px"}), width=8),      
                ], className="mb-5"),
                dbc.Row([
                    dbc.Col(html.H3("Something", className="mb-3"), width=4),
                    dbc.Col(dcc.Graph(style={"height": "350px"}), width=8),      
                ], className="mb-5"),
            ],
            fluid=False,
            className="dbc dbc-ag-grid",
        )
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)