dash plotly bootstrap number input placing

Question

So I want to place my text box as shown

However, my code doesn't work and show me this instead

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!

score 1 · Accepted Answer · answered Mar 08 '21 at 17:13

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.

Glad to help. By the way In addition to accepting an answer, you can also upvote answers that you've found helpful (Since, you've passed the upvote treshold of 15 reputation). — 5eb, Mar 09 '21 at 06:50
I have upvoted the answers, If you don't mind, I've got a qn, So I am working with decimal points, eg: 5.9. Can I just change `dbc.Input(type="number")` to `dbc.Input(type="float")` ? or is there any other ways. thank you! — rongz, Mar 09 '21 at 10:43
`dbc.Input` supports [the following control types](https://github.com/facultyai/dash-bootstrap-components/blob/main/src/components/input/Input.js#L157). `dbc.Input` renders to a regular [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) so you could look at this [question](https://stackoverflow.com/q/34057595/9098350) for ideas to apply in your situation. So that problem is not really a Dash problem, but more of a regular html input problem. — 5eb, Mar 09 '21 at 11:45
So viable solutions from looking at the stackoverflow post I shared earlier could be to do something using javascript or to use the `pattern` property and match valid input values using a regex. — 5eb, Mar 09 '21 at 11:51

dash plotly bootstrap number input placing

1 Answers1