Dash bootstrap sidebar keeps expanding

Dash Python
1

Good day, I am a dash beginner.

I have a sidebar with a dropdown component which is multiselect.
The dropdown contains plots that when selected will be plotted.

When you keep adding plots, it will keep expanding the sidebar.

My code:


# styling the sidebar
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
    # 'width': '100%'
}
sidebar = html.Div(
    [
        html.H2("Well App", className="display-4"),
        html.Hr(),
        html.P(
            "Well App is for plotting of different well data", className='lead'
        ),
        html.Div(
            [
                dbc.Label("Select Unit"),
                dbc.RadioItems(
                    id="unit",
                    options=[{"label": i, "value": i} for i in unit_lst],
                    value=unit_lst[0],
                    inline=True,
                ),
            ],
            className='mb-3'
        ),
        html.Div(
            [
                dbc.Label(id='unit-selctd', children=[]),
                dcc.Dropdown(id='unit-selctd-dpdn', multi=False,
                             value='Field', options=[], className='mb-2',
                             style={'width': '100%  !important'}),
            ]
        ),
        html.Div(
            [
                html.Label('Plots'),
                dcc.Dropdown(id='figs-to-plot', multi=True,
                             value='Field', options=[]),
            ]
        ),

    ],
    style=SIDEBAR_STYLE
    className=''
)

tab_container = html.Div(id='tab-content')


app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(sidebar, width=4),
        dbc.Col(tab_container)
    ])
], fluid=True)

I saw this solution in stack-over: flow javascript - Stop dropdown width from expanding - Stack Overflow which suggests that I use

#auswahl{
    width:50%;
}

I have problem with the solution
The dropdown is in a sidebar and I styled the sidebar width using bootstrap by asking it to take 4 of the whole width and I want the dropdown to take up the sidebar width as it is the parent, so when I made dropdown width to be 100%, it made the sidebar to take up the whole width of the screen which is not what I want.

Please tell me how to solve this and if possible include the code for me please.

Thank you

2

Hi @trinityimma
I hope you get an answer to the javascript question. Alternatively, you should be able to use Dash Bootstrap and set sidebar width according to screen size, which would not allow the sidebar to expand too much.

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, use_pages=False, external_stylesheets=[dbc.themes.SPACELAB])
sidebar = dbc.Nav(
            [
                dcc.Dropdown(['money','food','house','bed','car','termites','more items to chose from'], multi=True)
            ],
            vertical=True,
            pills=True,
            className="bg-light",
)

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div("Python Multipage App with Dash",
                         style={'fontSize':50, 'textAlign':'center'}))
    ]),

    html.Hr(),

    dbc.Row(
        [
            dbc.Col(
                [
                    sidebar
                ], xs=4, sm=4, md=2, lg=2, xl=2, xxl=2),

            dbc.Col(
                [
                    html.Div("This is where the content of the page will go. No matter how big or small the screen is and no matter how many dropdown items are chose, the side bar should keep its size.")
                ], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
        ]
    )
], fluid=True)


if __name__ == "__main__":
    app.run(debug=False)
3

@adamschroeder , thanks I will try that for sure.

4

I hope you find it helpful, @trinityimma
And based on a suggestion from @AnnMarieW, you could also make the screen size width section shorter by writing it this way:

    dbc.Row(
        [
            dbc.Col(
                [
                    sidebar
                ], xs=4, md2),

            dbc.Col(
                [
                    html.Div("This is where the content of the page will go. No matter how big or small the screen is and no matter how many dropdown items are chose, the side bar should keep its size.")
                ], xs=8, md=10)
        ]
    )

This should work because the number applies to screen size >= to what you specify

5

Thanks! It worked