Properly style a card with multiple inputs and a button in Dash Bootstrap

[guidocioni]

Sorry but I’m not a frontend guy.
I have an app where the user is expected to enter some inputs and press some buttons. I have enclosed all these inputs and buttons into two cards that look like this on mobile

There are many problems with this.

• The buttons seem out of place and do not fill the container entirely
• The text next to the checkbox does not have the same size as the checkbox itself
• The margins are probably excessive.

I tried to wrap every component into a row and only specified the bottom margin to leave some space, but probably there’s a better way to handle it?

Her is some minimal code to reproduce this example
for the first card

dbc.Card(
    [
        dbc.Row(
            dbc.InputGroup(
                [
                    dbc.Input(placeholder="Where are you?"),
                ],
                className="mb-2",
            ),),
        dbc.Row(
            [
                dbc.Button("Search",
                           className="d-grid gap-2 col-10 mb-2")
            ], justify='center'
        ),
        dbc.Row(
            html.Div('Closest Locations', className="mb-2"),
        ),
        dbc.Row(
            dbc.InputGroup(
                [
                    dbc.Select(),
                ],
                className="mb-2",
            ),
        )
    ],
    body=True, className="mb-2"
)

for the second card

dbc.Card(
    [
        dbc.Row(
            dbc.InputGroup(
                [
                    dbc.InputGroupText("Model"),
                    dbc.Select(),
                ],
                className="mb-2",
            ),
        ),
        dbc.Row(
            dbc.InputGroup(
                [
                    dbc.InputGroupText(
                        dbc.Checkbox()),
                    dbc.Input(placeholder='Compute climatology', disabled=True)
                ],
                className="mb-2",
            ),
        ),
        dbc.Row(
            [
                dbc.Button("Submit", className="d-grid gap-2 col-10",)
            ], justify='center',
        ),
    ],
    body=True, className="mb-2"
)

[AIMPED]

Hi @guidocioni , I removed the rows and added the dbc.CardBody() instead of body=True. This way you can adjust the padding.

from dash import Dash, html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Row(
    dbc.Col(
        width=2,
        children=dbc.Stack(
            [

                dbc.Card(
                    dbc.CardBody(
                        [
                            dbc.InputGroup(
                                dbc.Input(placeholder="Where are you?"),
                                className="mb-2",
                            ),
                            dbc.Button(
                                "Search",
                                className="mb-2 col-12"
                            ),
                            html.Div(
                                'Closest Locations',
                                className="mb-2"
                            ),
                            dbc.InputGroup(
                                dbc.Select(),
                            )
                        ],
                        className="mb-2",
                        style={'padding': '0.5rem'}
                    )
                ),
                dbc.Card(
                    dbc.CardBody(
                        [
                            dbc.InputGroup(
                                [
                                    dbc.InputGroupText("Model"),
                                    dbc.Select(),
                                ],
                                className="mb-2",
                            ),
                            dbc.InputGroup(
                                [
                                    dbc.InputGroupText(
                                        dbc.Checkbox()
                                    ),
                                    dbc.Input(
                                        placeholder='Compute climatology',
                                        disabled=True)
                                ],
                                className="mb-2",
                            ),
                            dbc.Button(
                                "Submit",
                                className="col-12"
                            )
                        ],
                        className="mb-2",
                        style={'padding': '0.5rem'}
                    )
                )
            ]
        )
    )
)

if __name__ == '__main__':
    app.run(debug=True)

renders like this in Chrome and Firefox

[AIMPED]

BTW, seeing Hamburg in your example made my day.

[guidocioni]

Then why didn’t you use that in the placeholder?

fellow Hamburger?

{thanks, I’ll try that out shortly}