1

The (for instance) "horizontal form" code example of the Form component of the dash bootstrap components documentation (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/form/) looks like this:

# ...
email_input = dbc.Row(
    [
        dbc.Label("Email", html_for="example-email-row", width=2),
        dbc.Col(
            dbc.Input(
                type="email", id="example-email-row", placeholder="Enter email"
            ),
            width=10,
        ),
    ],
    className="mb-3",
)
# ...

Why is the Input component in a Col, but the Label is not?

LCsa
  • 607
  • 9
  • 30

1 Answers1

0

From dbc docs:

Create a horizontal form by using the Row component. Be sure to specify width on the Label component, and wrap your inputs in Col components.

Label act as "col-type" element when width parameter is specified. So when width=2, width of the label will be two columns and rest of them (10) will be filled by dbc.Col() (in your example you have width=10 but you can omit this parameter).

See the example from Bootstrap docs, uses similar approach (https://getbootstrap.com/docs/5.1/forms/form-control/#readonly-plain-text). Label has col-sm-2 col-form-label classes.

mikulatomas
  • 330
  • 1
  • 12
  • So, essentially, I could also write `dbc.Col(dbc.Label("Email", html_for="example-email-row"), width=2)`? – LCsa Jan 31 '22 at 13:55
  • @LCsa I do not think so, you would end up with col inside col (you do not want that), bootstrap is designed in this way to prevent putting anything else into form label i guess. – mikulatomas Jan 31 '22 at 15:11