How to put the input box below the label in dash bootstrap components

user_12195048 0
Viewed 3078

What is the right way to put the input box just below the label, not in line with it? I am trying to do this for more than 4 hours but could not able to do it.

The product-related duration label and the input are perfect and which is what I wanted but it happened luckily because the text is large. How can I do the same with others? I tried some other methods like adding empty spaces or ClassName="form-control" and a bunch of others but nothing working properly, it makes the form too big.

enter image description here

The code that I am using -

controls = dbc.Card(
    [
    
        dbc.FormGroup(
            [
                dbc.Label("Page Value", size="md"),
                dcc.Input(
                    id="page-value-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Exit Rate", size="md"),
                dcc.Input(
                    id="exit-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Bounce Rate", size="md"),
                dcc.Input(
                    id="bounce-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related", size="md"),
                dcc.Input(
                    id="product-related-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related Duration", size="md"),
                dcc.Input(
                    id="product-related-dur-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
    ],
    body=True,
)

dbc.Row(
            [dbc.Col(controls, md=4), dbc.Col(dcc.Graph(id="cluster-graph"), md=8)],
            align="center",
        ),
bootstrap-4 plotly-dash plotly python
2 Answers

If the .form-control style does not work for you, then you could simply add .w-100 to the labels. This should have the same effect as your wider label causing the input to wrap.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<form>

  <div class="form-group">
    <label for="formGroupExampleInput" class="w-100">class="w-100" Example label</label>
    <input type="text" class="" id="formGroupExampleInput" placeholder='class="" Example input placeholder'>
  </div>

  <div class="form-group">
    <label for="formGroupExampleInput2">class="" Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder='class="form-control" Another input placeholder'>
  </div>

</form>

user_61273930

I ran it in the Jupyterlab environment. The problem solves Input() in the bootstrap component, not Input() in the Dash component.

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from jupyter_dash import JupyterDash

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

controls = dbc.Card(
    [
    
        dbc.FormGroup(
            [
                dbc.Label("Page Value", size="md"),
                dbc.Input(
                    id="page-value-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Exit Rate", size="md"),
                dbc.Input(
                    id="exit-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Bounce Rate", size="md"),
                dbc.Input(
                    id="bounce-rate-input",
                    value=0,
                    type="number",
                    min=0,
                    max=100,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related", size="md"),
                dbc.Input(
                    id="product-related-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
        dbc.FormGroup(
            [
                dbc.Label("Product Related Duration", size="md"),
                dbc.Input(
                    id="product-related-dur-input",
                    value=10,
                    type="number",
                    min=0,
                    max=300,
                    # className="form-control",
                ),
            ],
        ),
    ],
style={"width": "18rem"}, body=True
)

rows = dbc.Row([
    dbc.Col(controls, md=4),
    dbc.Col(html.Div(dcc.Graph(id="cluster-graph")), md=8)
],
    align="center")

app.layout = rows

if __name__ == "__main__":
    # app.run_server()
    app.run_server(mode='inline')

enter image description here

user_131078040
Related