Dashboard Horizontal size

Dash Python
1

Hello

I am using dash bootstrap to layout dashboard structure on screen.
This limits dashboard to width of browser window.
How to do I layout dashboard where width of dashboard is wider than browser window? How to activate horizontal scroll bars of browser?

2

hi @NAbraham
Welcome back to the community.

Are you looking for something like this?

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc
import plotly.express as px

df = px.data.tips()

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.Div(
                children=["This is very long text."]*15,
                style={"overflow-x": "auto", "white-space": "nowrap"}
                # or
                # style = {"white-space": "nowrap"}
            ),
        ], width=12)
    ])
])

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

Hello
Thanks for reply
Below is modified version of code,
Why does contents wrap around, even though horizontal scroll bar is active.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc
import plotly.express as px

df = px.data.tips()

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

app.layout = dbc.Container([
html.Div(
                children=[
    dbc.Row([
        dbc.Col([

                          dbc.Row([dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],)
                          ],
                          )


        ], width=12)


    ],
    )
], style={"overflow-x": "auto", "white-space": "nowrap"}
            ),
],fluid=True
)

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

hi @NAbraham
I’m not sure I understand your question.

5

Hello

Why does highlighted text move to next line?
Below is what i see

image
image1914×82 4.01 KB

6

It’s probably because of how you have multiple divs and multiple cols.

If I style one row with col and div, it works.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc
import plotly.express as px

df = px.data.tips()

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([

                          dbc.Row([dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                                  html.Div(
                                      children=["This is very long text."],
                                      # style={"overflow-x": "auto", "white-space": "nowrap"}
                                      # or
                                      # style = {"white-space": "nowrap"}
                                  ),
                              ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],),
                                   dbc.Col([
                    html.Div(
                        children=["This is very long text."],
                        #style={"overflow-x": "auto", "white-space": "nowrap"}
                        # or
                        # style = {"white-space": "nowrap"}
                    ),
                ],)
                          ],
                          )


        ], width=12)


    ], style={"overflow-x": "auto", "white-space": "nowrap"}),

    html.Div("Applying horizontal scroll style to Row with one dbc.Col:", className='my-5'),

    dbc.Row([
        dbc.Col([
            html.Div(children=["This is very long text. This is very long text. This is very long text. This is very long text. This is very long text."
                               "This is very long text. This is very long text. This is very long text. This is very long text. This is very long text."])
        ], width=12)
    ], style={"overflow-x": "auto", "white-space": "nowrap"})

],fluid=False
)

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