Bootstrap Components Grid System not Working

[Jules]

I’m having a few issues with the dbc library and was hoping to get some help.

1. When I load a page my browser window is shifted to the left slightly, and I have to scroll over to centre the page. Similar behaviour to this issue here, I tried the recommended fluid=True solution but it doesn’t work. Here’s my app layout:

app.layout = dbc.Container(
    [
        # Data Display Panel
        dbc.Row(
            [
                # Left
                dbc.Col(
                    [
                        liveplot,
                    ],
                    width=9,
                    style={"padding-right": "1vh"}
                ),
                # Right
                dbc.Col(
                    [
                        # Top
                        dbc.Row(
                            [
                                livebar
                            ],
                            style={"padding-bottom": "1vh"}
                        ),
                        # Bottom
                        dbc.Row(
                            [
                                wind_direction
                            ],
                            style={"padding-top": "1vh"}
                        )
                    ],
                    width=3,
                    style={"padding-left": "1vh"}
                )
            ],
            style={"height": "100vh"}
        )
    ],
    fluid=True,
    style={"width": "100vw", "height": "100vh"}
)

2. This column within a formgroup refuses to act as a column, instead it acts as a row. This happens no matter the width I set it to using the width= argument.
   
   
   
   If I wrap the columns in a row, they return to acting like columns as they should, except now the width= argument does nothing at all and I can’t make my dropdown as large as I would like it.
   
   

formcol2 = dbc.FormGroup(
    [
        dbc.Label("Log File", html_for="log-file-form"),
        dbc.Col(
            dcc.Dropdown(
                id='log-select',
                options=[],
                placeholder="Select a file..."
            ),
        ),
        dbc.Col(
            dbc.Button(
                "Start Logging",
                size='sm',
                color='success',
                id='logger-start-button',
                n_clicks=0
            )
        )
    ],
)

[tcbegley]

1. It’s a bit hard to know for sure what the problem is here without knowing what liveplot and livebar etc. are. However, one thing you should definitely always do is have immediate children of dbc.Row be dbc.Col elements. The reason is that Row sets negative margins which Col then compensates for. If you don’t have a Col then your layout ends up looking weird. Here’s a slightly rewritten version of your layout. The style arguments for all components except Container just add background colors so you can see what’s happening, they can be safely deleted. I’ve made use of Bootstrap utility classes such as py-3 which adds vertical padding. See here for details.

app.layout = dbc.Container(
    [
        # Data Display Panel
        dbc.Row(
            [
                # Left
                dbc.Col(
                    html.Div(
                        "liveplot",
                        style={
                            "backgroundColor": "red",
                            "backgroundClip": "content-box",
                        },
                        className="h-100 py-3",
                    ),
                    width=9,
                ),
                # Right
                dbc.Col(
                    [
                        # Top
                        html.Div(
                            "livebar",
                            className="h-50 py-3",
                            style={
                                "backgroundColor": "green",
                                "backgroundClip": "content-box",
                            },
                        ),
                        # Bottom
                        html.Div(
                            "wind_direction",
                            className="h-50 py-3",
                            style={
                                "backgroundColor": "blue",
                                "backgroundClip": "content-box",
                            },
                        ),
                    ],
                    width=3,
                ),
            ],
            className="h-100",
        )
    ],
    fluid=True,
    style={"height": "100vh"},
)

With all of that I get something like this and no scrolling issues.

2. I think you want to put both columns in a Row and add width="auto" to the column containing the button like this

dbc.FormGroup(
    [
        dbc.Label("Log File", html_for="log-file-form"),
        dbc.Row(
            [
                dbc.Col(
                    dcc.Dropdown(
                        id="log-select",
                        options=[],
                        placeholder="Select a file...",
                    ),
                ),
                dbc.Col(
                    dbc.Button(
                        "Start Logging",
                        size="sm",
                        color="success",
                        id="logger-start-button",
                        n_clicks=0,
                    ),
                    width="auto",
                ),
            ],
            justify="center",
        ),
    ],
)

[Jules]

This works! However I’m still having some issues. My liveplot is a figure that I want to autosize to the height of livebar+wind direction. The liveplot exists within a card. So essentially, is there a way to autosize the height of a card to the height of its parent row/container?

[tcbegley]

Easiest way is probably to add className="h-100" to the card (h-100 is a Bootstrap utility class that will set the height to 100% of the parent).

[jacobbayer]

How would you remove the white space between the boxes?