# Dashboard Horizontal size

**URL:** <https://community.plotly.com/t/dashboard-horizontal-size/66157>\
**Category:** Dash Python\
**Created:** [July 16, 2022, 1:12pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157 "2022-07-16T13:12:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NAbraham](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@NAbraham](https://community.plotly.com/u/NAbraham)\
**Post date:** [July 16, 2022, 1:12pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/1 "2022-07-16T13:12:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 17, 2022, 4:05am UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/2 "2022-07-17T04:05:39Z")

</div>

hi @NAbraham  
Welcome back to the community.

Are you looking for something like this?

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![NAbraham](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@NAbraham](https://community.plotly.com/u/NAbraham)\
**Post date:** [July 21, 2022, 3:02pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/3 "2022-07-21T15:02:28Z")

</div>

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

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 21, 2022, 3:07pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/4 "2022-07-21T15:07:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NAbraham](https://avatars.discourse-cdn.com/v4/letter/n/eb8c5e/32.png) [@NAbraham](https://community.plotly.com/u/NAbraham)\
**Post date:** [July 21, 2022, 3:37pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/5 "2022-07-21T15:37:05Z")

</div>

Hello

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/e/5e311a45e0c3dcf5308bc2f310f0c6e73c3222ad.png)

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 21, 2022, 4:02pm UTC](https://community.plotly.com/t/dashboard-horizontal-size/66157/6 "2022-07-21T16:02:49Z")

</div>

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

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

```auto
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)

```