CODEWITHSUNDEEP
pythonplotlyplotly-dash
rongz
rongz

Reputation: 31

dash plotly bootstrap number input placing

So I want to place my text box as shown

However, my code doesn't work and show me this instead enter image description here

Heres my coding:

html.H1("Query1", style={'text-align': 'center','fontSize': 30}),
            dbc.Row(
                [
            dbc.Col(dcc.Graph(id='graphQ', figure={}),md=8),
            html.P("1"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),),
            html.P("2"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1)),
            ]),
            dbc.Row(
                [
            html.P("1"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),),
            html.P("2"),
            dbc.Col(dbc.Input(type="number", min=0, max=10, step=1),)],
                align="end",
            )
            ])]))

Any help is appreciated!

Upvotes: 0

Views: 1807

Answers (1)

bas
bas

Reputation: 15432

You could do something like this:

def custom_input(paragraph_text, min_value=0, max_value=10, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="number", min=min_value, max=max_value, step=step),
        ],
        style={"display": "flex"},
    )


app.layout = html.Div(
    children=[
        html.H1("Query1", style={"textAlign": "center", "fontSize": 30}),
        dbc.Row(
            [
                dbc.Col(dcc.Graph(id="graphQ", figure={}), md=8),
                dbc.Col(
                    children=[
                        dbc.Row(
                            [
                                dbc.Col(custom_input("1")),
                                dbc.Col(custom_input("2")),
                            ],
                            style={"paddingBottom": 30},
                        ),
                        dbc.Row(
                            [
                                dbc.Col(custom_input("1")),
                                dbc.Col(custom_input("2")),
                            ],
                            style={"paddingBottom": 30},
                        ),
                    ],
                    md=4,
                ),
            ]
        ),
    ]
)

I've abstracted your label / input component combination into a custom function to hopefully make the layout approach more clear and the code more reusable.

So my idea here is we only need one row with two columns. Where the first column consists of the entire graph.

The second column consists of two rows where each row contains two columns, each containing a custom input.

Upvotes: 1

Related Questions