Dash_bootstrap_component input box gets squished when centered and aligned

[cat0tail]

Another dash_boostrap_component question:

I have a contain that spans the whole page (vh-100) and I want an input box in the middle of the page. However, when I use d-flex align-items-center justify-content-center, it squishes my input box :(.

I tried other approaches to center and align but none worked. I can tell that the column gets squished thats why the input box gets squished so I tried className='col-8' but that doesnt work either.

What can I do to get the normal size of the input box back?

rec_pg = dbc.Container(id='rec_test', children=
[
    dbc.Row([
        dbc.Col([
            dbc.Input(id="input_test", placeholder="Type something...", type="text"),
            dbc.Button("Secondary", color="secondary", className="mr-1"),
        ], className='col-8')
    ])
],
className="vh-100 d-flex align-items-center justify-content-center",
)

With no className="vh-100 d-flex align-items-center justify-content-center:

With className="vh-100 d-flex align-items-center justify-content-center:

Thank you!

[tcbegley]

I think the problem is applying d-flex to the Container. Row also has display: flex applied through the .row class, so having a flex container inside another flex container causes the sizing to go funny. Instead do what you’re doing, but apply it at the Row level. Row even has align and justify keyword arguments so you don’t have to use the classes if you don’t want. Like this:

rec_pg = dbc.Container(
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Input(
                        id="input_test",
                        placeholder="Type something...",
                        type="text",
                    ),
                    dbc.Button(
                        "Secondary", color="secondary", className="mr-1"
                    ),
                ],
                width=8,
            )
        ],
        className="vh-100",
        align="center",
        justify="center",
    )
)

That gives me this:

Notice also I used the width keyword argument instead of applying col-8 to Col. You can also specify widths for different breakpoints, e.g. dbc.Col(..., width=12, md=8) for a column that is full width on small screens and switches to width 8 at the medium breakpoint (768px and up).

[cat0tail]

Awesome it works! Thank you @tcbegley!!