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 https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/ 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.
6 posts - 3 participants
