Set max height to a Div and make the content vertically scrollable

Dash Python
1

As the title says, I was wondering whether there was a way to create a div where, if the contents of the div are large enough to exceed a certain height, it would restrict the div height and make it scrollable instead.

What I would like to avoid is having a div that might get too big and push down the page the divs that come after.

Thanks

1 Like
2

Sure, you achieve this with some inline style arguments, something like html.Div(..., style={"maxHeight": "400px", "overflow": "scroll"}) should do the trick.

2 Likes
3

This is perfect, thank you!

2 Likes
4

Brilliant!!, Any idea on how to hide the scrollbar within the styling {} of the div? obviously maintaining the functionality
I got lost in understanding how to make this possible within the css

5

@monitorcasalab, you can do it with a little custom CSS. Here’s an example

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

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

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    html.Div(
                        html.H1("Scrollbars", className="text-center"),
                        className="p-3 gradient",
                    ),
                    width=6,
                    style={"overflow": "scroll", "height": "400px"},
                ),
                dbc.Col(
                    html.Div(
                        html.H1("No scrollbars", className="text-center"),
                        className="p-3 gradient",
                    ),
                    width=6,
                    style={"overflow": "scroll", "height": "400px"},
                    className="no-scrollbars",
                ),
            ]
        )
    ]
)

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

and the CSS that I put in assets/style.css

.gradient {
  /* background gradient so that we can see the scrolling */
  background: rgb(2, 0, 36);
  background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 17%, rgba(0, 212, 255, 1) 100%);
  /* set height so that element is scrollable */
  height: 1000px;
}

.no-scrollbars::-webkit-scrollbar {
  display: none;
}

.no-scrollbars {
  scrollbar-width: none;
}

Did a quick test and it works on Safari, Firefox and Chrome for me.

2 Likes
6

Thank you so much, works magically !

1 Like