Force app layout to browser window height

Dash Python
1

I’ve implemented a UI based on several Dash Bootstrap Component tabs. One of the tabs contains a grid layout. The grid layout requires to scroll the web browser window. I’d like avoid that a user has to scroll, force the layout to the height of the screen and shrink the content accordingly. Has someone an idea how to get this done?

2 Likes
2

Not sure I quite understand, could you post a code snippet demonstrating what you’ve tried or something?

3

I’ve tried nothing yet because there is no way to set the height of the Dash Bootstrap Component grid layout to the height of the screen. There is no a way to set the vertical alignment of rows, but not the height of rows. equivalent to One way could be to wrap the grid layout into a div container and set the div Container height to the screen height.

4

Hmm, yeah I think it might be tricky, the contents of one row have no way of knowing the contents of any other row, so it would be difficult for them to adapt to each other.

The Bootstrap grid layout is built with flexbox, it might be that you can get some more control if you work directly with that instead? I always found this guide pretty handy, maybe articles like this can help too.

5

Thx for the hint. I’ll have a look into it.

I’m using the interval component to update parts of the UI. This leads to the situation that if I scroll down on the page the scroll bar jumps back to the start whenever an interval update is performed. Is it possible to disable this behaviour?

6

Another possible workaround could be to wrap the grid layout into a div container and force the div container height to the browser height.

7

Yeah definitely, I’ve used that sort of thing before. Let me know how you get on.

8

How to style specific div containers is described in the dash-html-components. To force a div container to the browser window height can be achieved via it’s CSS property height set to 100vh. Setting the height to 100vh as follows

html.Div(
    [<children>],
    style={'height': 100vh},
)

is not possible cause it raises a syntax error:

    style={'height':100vh},
                        ^
SyntaxError: invalid syntax

How can I workaround this issue?

9

I’m not familiar with 100nv, I thought you want 100vh (viewport-height)?

In any case, I think you just need to make it a string

html.Div(..., style={"height": "100vh"})
10

Uops, I fixed the typos. I used {"height": "100vh"} as well. Unfortunatelly the scroll bar was still there. Even trying {"height": "100vh", "min-height": "100vh"} suggested in a stackoverflow comment wr.t. scrolling was not successful. The only difference is that the scroll bar does not reset to the start but to the middle of the bar…?

11

Because the style arguments go through react you might have to do {"minHeight": "100vh"}, not sure. You can either try it or use your browsers inspector to see if the min-height style is being applied correctly.

12

Unfortunatelly neither style={"minHeight": "100vh"} nor style={"height": "100vh", "minHeight": "100vh"} works. Again… the only difference is that the scroll bar does not reset to the start but to the middle of the bar.

First I thought it’s because the html.Div container I was styling is contained in the grid layout which is contained in a dbc.Tab. The dbc.Tabs are not wrapped into a Div but assigned to the layout directly with app.layout = tabs. But even when I wrap the tabs into a Div (app.layout = html.Div([tabs], style=<STYLING>)) and style it with either style={"height": "100vh", "min-height": "100vh"} or style={"height": "100vh", "minHeight": "100vh"} it’s still the same behaviour.