Proper way to make sidemenu full page height?

Dash Python
1

I have created a dashboard with a (left) sidemenu which I want to cover the entire page’s height (whatever that may be). Currently I am achieving this by manually changing every dash-generated div:

app0, #react-entry-point, #react-entry-point>div, #_dash-app-content,
#_dash-app-content>div, #main_content, #main_page, #selected_subpage>div {
    height: 100%
}

which in dash-1.0.0 dev mode needs these to be added:

#_dash-global-error-container, #_dash-global-error-container>div,
#_dash-global-error-container>div>div>div,
#_dash-global-error-container>div>div:nth-child(2)

The only CSS getting loaded before my CSS is the one mentioned in the docs (https://codepen.io/chriddyp/pen/bWLwgP.css). After that, bootstrap is also loaded. This method more or less works, but it does not seem to be the proper way especially since most of these divs don’t have ids or have underscores in their names (‘internal implementation’?).

2

When you will be done, could you please share your code?

I just started working with Bootstrap a couple of day ago, and I’m also trying to get a Sidebar/Sidemenu which has to be the toolbar of my app. So, I might be interested in having a look on what you did.

Thanks

3

Sure. The sidebar is handled here (its definition is irrelevant but can be found at the top). This is modified in the CSS here* and here (with other small customizations elsewhere).

*This needs a few more lines as mentioned above when react debug app is on, so the first few lines would be:

.app0, #react-entry-point, #react-entry-point>div, #_dash-app-content,
#_dash-app-content>div, #main_content, #main_page, #selected_subpage>div
#_dash-global-error-container, #_dash-global-error-container>div,
#_dash-global-error-container>div>div>div,
#_dash-global-error-container>div>div:nth-child(2)
{
    height: 100% !important;
}

Result:

image
image.png665×890 18.9 KB

1 Like
4

Excellent! Thank you!