Quantcast
Channel: 🎛️ Dash - Plotly Community Forum
Viewing all articles
Browse latest Browse all 6271

Bootstrap Components Grid System not Working

$
0
0

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"}
)
  1. 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
            )
        )
    ],
)

2 posts - 2 participants

Read full topic


Viewing all articles
Browse latest Browse all 6271

Trending Articles