I have just upgraded my system to:
- dash 1.17.0
- dash-bootstrap-components 0.10.7
- dash-core-components 1.13.0
stealing the top example from Layout - dbc docs start an app by defining
app = dash.Dash(__name__,
external_stylesheets=[dbc.themes.LITERA])
app.layout = html.Div([
dbc.Row(dbc.Col(html.Div("A single column"))),
dbc.Row([
dbc.Col(html.Div("One of three columns")),
dbc.Col(html.Div("One of three columns")),
dbc.Col(html.Div("One of three columns"))
])])
the browser opens up with the Div being a few pixels wider than the browser causing a horizontal scrollbar and few pixels of unwanted horizontal play. Swiping right is shown below:
Defining style = {‘width’: ‘100%’} to the Div or the Row do not solve this problem. The only fix is adding the following to an imported css file within assets:
.row {
margin: 0;
}
Also setting className=‘no-gutters’ turns this off since it eliminates the margins and led to this being exceptionally difficult to solve since I had been defining that in a large percentage of my rows.
1 Like
Hey @marketemp
You could try wrapping the content in dbc.Container as shown in the quickstart https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/
The Container component is used to center and horizontally pad your app’s content.
I noticed that, but unless there is a dbc.Container setting to get right, the entire Container is displayed 20ish pixels to the right. Is there a way to use Container and get flush-left alignment?
" Use the keyword argument fluid=True if you want your Container to fill available horizontal space and resize fluidly."
1 Like
fluid=True appeared to work well and also solved my other issue at Bug: html.Div and dbc.Row output does not vertically align which I have now noticed is caused by the .row
margin: 0; (thought I had double checked that)
However on each page new page click (I am using a multi-page app with dbc.NavLink) the whole page gets adjusted about 10 pixels to the right. I thought this could be caused by dbc.Container not gelling with my other px-# and mx-# settings but even after redefining them all to dummy names, my app still slides to the right with every page change.
Going back to html.Div 
and actually living with the horizontal browser play until this can be figured out.
Hey @marketemp
The dbc.Container with fluid=True should be the right way forward here.
As a bit of background, Bootstrap rows have a negative margin, to cancel out the margins of the first and last columns in the row and make sure everything is aligned. If you have a row on your page by itself this can cause problems, but the container is designed to handle the negative margin and make everything look right again.
Can you share some code that reproduces the problem? It sounds like maybe each time you navigate between pages maybe another container is being injected into the layout? At least that would explain the shifts to the right? If you can’t share code then taking a look at the inspector in your browser’s developer tools should shed some light on the situation.
Hi @tcbegley, I am sure the way I am making my multi-page layout calls somehow injects a new Container every time as you describe. I can send you a sample of the code would be possible but take some time. I utilize a Dash Class that spreads my Dash logic across various Mixins (callbacks, layout, queries, tables, graphs, auth) for organization and consistency and could be deemed as contrary to Dash standards (one giant app.py with all of the callbacks and app.layout={one giant layout}).
I have gone back to using html.Div and either living with this, or keeping the .row { margin: 0;} and manually adjusting my Divs and Rows that don’t align because of this as closely as possible. Of course that assumed that this eventually would be fixed. Based on your response, I now assume this won’t be and I will have to make the best with dbc.Container.
I see now that dbc.Container is clearly conveyed in the opening paragraph of https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/ I was going to suggest that the layout page examples needed a rev to convey this but each that call that wraps dbc.Row and dbc.Col within an html.Div is row = html.Div which would fall beneath an overarching dbc.Container call.
Even using dbc.Container + fluid=True and ironing out the page shift, the margin is much larger than I would like it to be (about 12px). I have never used the inspector within the browsers dev tools, but surely need to learn that now that I am getting further into the weeds of Dash Layout.
