Dashboard width increased by columns

Dash Python
1

Hello,

Whenever I am trying to use bootrstrap components rows and columns my dashbard expands to the right and I need to scroll my browser window horisontally. Does anyone encounter this issue and knows what might be the reason?

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

app.layout = html.Div(children=[
    
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 4)'}, width=4),
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 2, 228)'}, width=4),
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 228)'}, width=4),
            ],
        ),
    ])
2

I have check the same columns and row layout using className and I have got same issue. The output is good when I am not using bootstrap theme ‘dbc.themes.BOOTSTRAP’. Anyone knows which style parameter should I overwrite to repair this?

app.layout = html.Div(children=[
    
        html.Div(className='row',
            children=[
                html.Div(className='four columns',children=html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 4)'}),
                html.Div(className='four columns',children=html.Div("One of three columns"),style={'background-color': 'rgb(7, 2, 228)'}),
                html.Div(className='four columns',children=html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 228)'}),
            ],
        ),
    ],
)
3

I’ve bumped into this before, and it’s a lame, weird problem. The problem is that the dbc.Row is not in a fluid dbc.Container. This example solves your problem:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(fluid=True,children=[
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 4)'}, width=4),
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 2, 228)'}, width=4),
                dbc.Col(html.Div("One of three columns"),style={'background-color': 'rgb(7, 230, 228)'}, width=4),
            ],
        ),
    ])

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

Great, it works!. Thanks for help.

Other workaround was to add in css file lines below, but I guess your solution is better.

.row{
    margin-right:0px;
    margin-left:0px
}