dbc.Row and dbc.Col trigger horizontal scroll bar

Dash Python
1

Hello,

For last couple of days I have been fighting with horizontal scross bar that shows up at the bottom on the screen:

Screen
Screen1250×581 35.2 KB

Even when content is super simple and should not be wider than screen, this slider is there. It looks like there are just a couple of pixels standing out, but still irritating.

This is caused by dbc.Row and dbc.Col (even if column width is < 12). See at the following simple code that reprodues a problem:

app.layout = html.Div([
html.H2(id = ‘header_line’, children = “Title”),
html.Div(
children=[
dbc.Label(“Some slider”),
dcc.RangeSlider(id=‘period_slider’),
],
),

# Intermediate data only
html.Div(
    id="intermediate_data_loading_div",
    children=[
        dcc.Loading(
            id="intermediate_data_loading", 
            children=[
                html.Div(id='intermediate_period_data', style={'display':'none'}),
                html.Div(id='intermediate_timesheet_data', style={'display':'none'}),
                ],
            ),
        ],
    style={
        'padding-top':'10px',
        'padding-bottom':'10px',
        }
    ),

# This causes problem!
dbc.Row(
    id='graphs_row',
    children=[
        # Column with left pane
        dbc.Col(
            [
                html.H4(id = 'summary_line', children = "Content goes here"),
            ],
            width=5,
        ),
    ],
    ),
])

Any ideas how to fix that?

2

I think you’re missing a dbc.Container. You should always use Row and Col inside a container. You can set fluid=True on the container if you want it to take up the full width of the page. I suspect if you add the container to the layout the problem will go away.

1 Like
3

Hi, indeed it looks like a solution to the problem. It’s a bit tricky at it seems that I need to encapsule more elements than just dbc.Row, but still with a bit of try and error it seem to work.