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

Dash Python
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