Horizontal Scroll Bootstrap Modal component

Dash Python
1

Is it possible to add an horizontal scrollbar to a dbc.Modal component?

img
img1087×551 38.1 KB

2

I think that has to be created. When you use the vertical scroll keyword, does it not fix a horizontal default?

3

@davidjockey you can set the overflow-x CSS property to scroll inside the modal. Here’s an example

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State

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

app.layout = dbc.Container(
    [
        dbc.Button("Toggle Modal", id="button"),
        dbc.Modal(
            [
                dbc.ModalHeader("This modal's content is really wide!"),
                dbc.ModalBody(
                    html.Div(
                        # replace this div with your wide content
                        html.Div(className="gradient"),
                        style={"overflow-x": "scroll"},
                    )
                ),
            ],
            id="modal",
        ),
    ],
    className="p-5",
)


@app.callback(
    Output("modal", "is_open"),
    [Input("button", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n, is_open):
    if n:
        return not is_open
    return is_open


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

and the CSS I used to make the gradient (so you can see the effect of scrolling)

.gradient {
  /* background gradient so that we can see the scrolling */
  background: rgb(2, 0, 36);
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 17%, rgba(0, 212, 255, 1) 100%);
  /* set large width so we have to scroll horizontally to see everything */
  width: 3000px;
  /* set height so that element is visible */
  height: 400px;
}
3 Likes
4

Yes, I finally did that. It worked perfectly! Thank you!!

1 Like
5

@tcbegley
Does not wiórk for me though. My wide content are mutiple dbc.Cards. They just stack vertically on each other instead of in horizontally direction. Any ideas?

6

By default cards take up the width of the parent and stack on top of each other. To overcome this, set the width of the card manually (or min width) and style the parent so that children appear in a role. For example, take my example above and replace the modal with the following:

dbc.Modal(
    [
        dbc.ModalHeader("This modal's content is really wide!"),
        dbc.ModalBody(
            html.Div(
                [
                    dbc.Card(
                        f"Card {i}",
                        body=True,
                        style={"minWidth": "200px"},
                        className="mx-2",
                    )
                    for i in range(1, 10)
                ],
                className="d-flex flex-row",
                style={"overflow-x": "scroll"},
            )
        ),
    ],
    id="modal",
)
1 Like
7

@tcbegley thanks. It works nice! But additionaly i wonder if its the same situation with ModalHeader. I want a row of dbc components as children of the model header.Like a name and an input and a button. They just stacking on each other and does not seem to have standard styling. Do i have to change something here in styling and className also, like for the cards?