Prevent movement of html.Div elements when resizing the window

Dash Python
1

Hi,

how can I set the layout for html.Div elements, like a header to prevent moving, when resizing the window.

First example (window size = 100%)

grafik
grafik1160×170 9.73 KB

Second example (window size = 110%)

grafik
grafik1293×182 11.1 KB

The code for the layout looks like this

dbc.Row([
            dbc.Col([
                html.Div([html.H5('Gesteinskörnung', style={"height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'}),
                ], style={'text-align':'left', "width": "15%", 'margin-right':'25px'}),
                html.Div([html.H5('Menge [kg]', style={"height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'}),
                ], style={'text-align':'left', "width": "13%", 'margin-right':'25px'}),
                html.Div([html.H5('Transport', style={"height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'}),
                ], style={'text-align':'left', "width": "15%", 'margin-right':'25px'}),
                html.Div([html.H5('Entfernung [km]', style={"height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'}),
                ], style={'text-align':'left', "width": "14%"}),
            
            ], style={'display':'flex', 'width':'30%'}),
    
        ]),

Thank you for your help!

2

Is this what you want?
layout

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

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [html.H5("Gesteinskörnung",), dbc.Input(),],
                    md=3,
                    class_name="text-center",
                ),
                dbc.Col(
                    [html.H5("Menge [kg]",), dbc.Input()],
                    md=3,
                    class_name="text-center",
                ),
                dbc.Col(
                    [html.H5("Transport",), dbc.Input()], md=3, class_name="text-center"
                ),
                dbc.Col(
                    [html.H5("Entfernung [km]",), dbc.Input()],
                    md=3,
                    class_name="text-center",
                ),
            ],
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes
3

Thank you @trailboss for you response.

Since the html.H5 headers are on a different row I modified your code in this way:

 dbc.Row([
            dbc.Col(
                [html.H5('Gesteinskörnung'),], 
                md=3,
                class_name='text-center',
            ),

            dbc.Col(
                [html.H5('Menge [kg]'),],
                md=3,
                class_name='text-center',
            ),

            dbc.Col(
                [html.H5('Transport'),],
                md=3,
                class_name='text-center',
            ),

            dbc.Col(
                [html.H5('Entfernung [km]'),],
                md=3,
                class_name='text-center',
            ),
    
        ]),

However, the headers keep changing when I zoom in like this:

grafik
grafik774×64 16.2 KB

I would like to fix the header position and their whitespace between them, which means even if I zoom in and out the header positions should stay like in 1. (Zoom at 100%).

Thank you!

4

This did it for me, kind of weird solution, I know, but it works.

dbc.Row([
        dbc.Col([
            html.Div([html.H5('Gesteinskörnung', style={'margin-right':'105px', "height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'})]),
            html.Div([html.H5('Menge [kg]', style={'margin-right':'105px', "height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'})]),
            html.Div([html.H5('Transport', style={'margin-left':'5px', "height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'})]),
            html.Div([html.H5('Entfernung [km]', style={'margin-left':'165px', "height": "10px", 'margin-top': '12px', 'margin-bottom':'2px', 'justyfy-content': 'center'})]),

            ], style={'display':'flex', "width": "30%"}),
    ]),