Input and Label alignment correctly

Dash Python
1

Hi, I’m trying to make a configuration panel usign dash_bootstrap input’s but I can’t align this correctly. I’m using style={} dic but can’t find the correctly setup.
I want the labels and the input to the left but don’t response to the dbc.Row(…,justify=“start”)

Actual layout

input-bad-align
input-bad-align1558×345 5.59 KB

Desired layout

input-good-align
input-good-align1558×345 5.54 KB

Code

from dash import Dash, html
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
import pandas as pd

import dash_bootstrap_components as dbc
from dash import html

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])

input_groups = html.Div([
    #measurement config
        dbc.Row([
            dbc.Label(
                "Samples per file", 
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="# samples",
                    id="samps2",
                    className="me-3",
                    style={"width": 100}
                    )
            ),
            dbc.Label(
                "Sample Frecuency [kHz]", 
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="samp-frecuency",
                    id="samps",
                    className="me-3",
                    style={"width": 200}),
            ),        
        ],align='center',justify="end"),
        dbc.Row([
            dbc.Label(
                "Range [V]",
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="10",
                    value="10",
                    id="range-in",
                    className="m-3",
                    style={"width": 200}
                    ),
            ),
                dbc.Label(
                    "Device Connection", 
                    width="auto",
                    ),
            dbc.Col(
                dbc.Input(
                    type="text",
                    placeholder="Dev1/",
                    value="Dev1/",
                    id="dev_name",
                    valid=True,
                    style={"width": 200}
                    ),
            ),
            dbc.Col(
                dbc.Button(
                    children=html.I(className="fa fa-refresh"),  
                    color="primary",
                    outline=True),
                    #width="auto",
                    id="dev-check"),
        ],align='center',justify="start")
    ])

app.layout =input_groups
app.run_server(debug=True)

This run in W10 with:

  • python 3.11.5 64-bit,
  • dash 2.14.2,
  • dash_bootstrap_components 1.5.0,
  • pandas 2.1.1

Expected answer
A modification of my code that adjusts the inputs and labels like the Desired layout.

Thanks for your time.

2

Hi @juliancaba

I modified your code to use a dbc.Container() instead of html.Div(), removed the gutter between columns and added appropriate width to the columns and now the layout looks like this:

Screenshot (238)
Screenshot (238)1920×971 27.9 KB

here’s the code

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])

input_groups = dbc.Container([
    #measurement config
        dbc.Row([
            dbc.Label(
                "Samples per file",
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="# samples",
                    id="samps2",
                    className="me-3",
                    style={"width": 100}
                    ),
                width=2
            ),
            dbc.Label(
                "Sample Frecuency [kHz]",
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="samp-frecuency",
                    id="samps",
                    className="me-3",
                    style={"width": 200}
                ),
                width=2
            ),
        ],align='center', justify="start", className="g-0"),
        dbc.Row([
            dbc.Label(
                "Range [V]",
                width="auto",
                className="m-3"
                ),
            dbc.Col(
                dbc.Input(
                    type="float",
                    placeholder="10",
                    value="10",
                    id="range-in",
                    className="m-3",
                    style={"width": 200}
                    ),
                width=2
            ),
                dbc.Label(
                    "Device Connection",
                    width="auto",
                    className="m-3"
                    ),
            dbc.Col(
                dbc.Input(
                    type="text",
                    placeholder="Dev1/",
                    value="Dev1/",
                    id="dev_name",
                    valid=True,
                    style={"width": 200}
                    ),
                width=2
            ),
            dbc.Col(
                dbc.Button(
                    children=html.I(className="fa fa-refresh"),
                    color="primary",
                    outline=True),
                    #width="auto",
                    id="dev-check"),
        ],align='center', justify="start", className="g-0")
    ], fluid=True)

app.layout =input_groups
app.run_server(debug=True)
2 Likes
3

Thanks for your answer. I tryed your solution and workd perfectly.
Do you know where find more information about dbc.container? I’ve been looking but I can’t find this.

4

Glad you found this helpful, @juliancaba .
The main source of info about the topic can be found on the ‘Layout’ section at the Dash Bootstrap documentation in the link below.

I highly recommend taking the time to read the entire page. It’s well worth it.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/