Struggeling with component alignment

Dash Python
1

Hello guys,

i keep running into problems with propper alignment of components in Dash.

2023-12-17 20_52_38-Window
2023-12-17 20_52_38-Window1582×755 60.1 KB

As you can see in the image above i have a row of two dbc.Col which aren’t aligned vertically but also have a gap inbetween.

The code snippet is the following:

html.Div(
        [dbc.Row([
            dbc.Col([dcc.Markdown("Recent News"),grid],style={'margin-top':10}),
            dbc.Col(
                dcc.Graph(config={
                    "displaylogo": False,
                    'modeBarButtonsToRemove': ['pan2d','lasso2d','toImage']},
                    figure = fig),
                    style={'margin-top':10}),])   
        ],
    ),

I tried adding margin-top to align them vertically which doesn’t work. For the gap inbetween both components i tried “no_gutters” which doesn’t seem to work anymore aswell as className=“g-0”. Are there any other options to achieve the wanted alignment?

2

Was able to solve it myself by using Bootstrap Cards and setting the margin for each card individually. I guess Bootstrap Cards are the way to go if you want a properly aligned dashbord.

html.Div(
        [dbc.Card(
            dbc.CardBody([
                dbc.Row([
                    dbc.Col([dcc.Markdown("Recent News"),grid],style={'margin-top':10,'margin-right': -100},width=6),
                    dbc.Col(
                        dcc.Graph(config={
                            "displaylogo": False,
                            'modeBarButtonsToRemove': ['pan2d','lasso2d','toImage']},
                            figure = fig),
                            style={'margin-top':10,'margin-left': -100},width=6),], align='center')]),className="border-0 bg-transparent mx-0 px-0")   
        ],
    ),