Hi,
I’m playing around with dbc layouts and in particular different alignments of components in rows or columns. I am trying to reproduce the behaviour for horizontal alignment from the documentation (here). However, if I copy paste the layout into an app it does not behave as expected. All the components are somehow shifted to the left. Any idea what could be going wrong here? I am using dash 2.3.0 and dbc 1.0.3. Below is the sample code and a screen shot of the actual and the expected result. I have tried using class_name = “g-0” and turning off margins but to no effect. The background coloring shows that the extent of the rows does span the entire screen so the question is why are the elements inside the row not properly positioned.
import dash_bootstrap_components as dbc
from dash import html
import webbrowser
import dash
port = 5000
def open_browser():
webbrowser.open_new("http://localhost:{}".format(port))
print(dbc.__version__)
app = dash.Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
)
row_content = [
dbc.Col(html.Div("One of two columns"), width=4),
dbc.Col(html.Div("One of two columns"), width=4),
]
app.layout = row = html.Div(
[
dbc.Row(
row_content,
justify="start",
style={"background-color": "green"},
),
dbc.Row(
row_content,
justify="center",
style={"background-color": "cyan"},
),
dbc.Row(
row_content,
justify="end",
style={"background-color": "green"},
),
dbc.Row(
row_content,
justify="between",
style={"background-color": "cyan"},
),
dbc.Row(
row_content,
justify="around",
style={"background-color": "green"},
),
dbc.Row(
row_content,
justify="evenly",
style={"background-color": "cyan"},
class_name="g-0",
),
]
)
if __name__ == "__main__":
app.run_server(debug=True, use_reloader=True, port=port)
Expected output except for the design of course (from doc):
Actual outcome:
