Is it possible to add an horizontal scrollbar to a dbc.Modal component?
I think that has to be created. When you use the vertical scroll keyword, does it not fix a horizontal default?
@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;
}
Yes, I finally did that. It worked perfectly! Thank you!!
@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?
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",
)
@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?