Strange problem using dbc.Layout and "height":"100vh"

[rtadewald]

Hello, guys. I'm facing another small issue that I can't find a way to solve.

I've created a project with 2columns. In the first one, I've placed a sidebar. On the other one, my dash/plotly components. When I try to interact with the components, the screen starts to shake, as you can see in the gif I've made: https://media.giphy.com/media/vxh3TewRzCpFmI1y2U/giphy.gif

After some investigation, it looks like the problem is caused by the use of the css "height: 100vh".

Here's a small snipped to reproduce the error.

Code

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc


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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
        ], style={"background-color": "#FF0000", "height": "100vh"}),

        dbc.Col([
            dcc.Dropdown(
                    options=[{"label": "test", "value": "test"}],
                    id='dd-campaign'),
            ]),
        ])
    ], fluid="True")

if __name__ == "__main__":
    app.run_server(debug=True)```

- dash version: `2.0.0`
- dash-bootstrap-components version: `1.0.3`


Thank you so much in advance.

[tcbegley]

Hi @rtadewald

Thanks for raising this and apologies for the slow reply.

This is very strange, I can clearly see the issue in the attached gif, but running your code at my end is not reproducing the issue.

My best guess is that maybe it's because the dropdown is flush with the right edge of the screen, which is causing something strange to happen when the options are expanded. I don't know if this will help, since I can't reproduce and hence can't test, but could you try adding a small horizontal margin to the Container to see if it helps? You can add className="mx-1" to accomplish this. I.e.

app.layout = dbc.Container(..., fluid=True, className="mx-1")

Let me know if that helps? If not, can you share a few more details of the OS and browser that you are using, any additional CSS that might be in your assets/ folder, and also share the exact versions of all Dash related packages in your environment (I think from the Gif you're running macOS? In which case you should be able to do pip list | grep dash)