0

I'm using dash bootstrap component library to layout my dashboard. However the columns don't display properly when I'm using controls inside them.

Here is the code that I have for the app_layout

sidebar = html.Div(
                    id="sidebar-inner-div",
                    children=[
                        html.H6("MENU"),
                        html.Hr(),
                        dbc.Nav(
                            [
                                dbc.NavLink("Page 1", href="/", active="exact"),
                                dbc.NavLink("Page 2", href="/page-2", active="exact"),
                                dbc.NavLink("Page 3", href="/page-3", active="exact"),
                            ],
                            vertical=True,
                            pills=True,
                            style={"display": "block"},
                        ),
                    ],
            )

app.layout = html.Div([
    dcc.Location(id="url"),
    dbc.Row(id="main", children=[
        dbc.Col(id="sidebar", children=[ sidebar ], width=2),
        dbc.Col([
            dbc.Row([
                html.H1("Tetris: HR Dashboard", id="dashboard-title", className="display-4"),
            ]),
            dbc.Row(
                id="controls", children=[
                dbc.Col([
                    dcc.DatePickerRange(
                        id="date_picker",
                        min_date_allowed=date(2020 , 9, 1),
                        max_date_allowed=(date.today() - timedelta(days=1)),
                        start_date=date(2020 , 9, 1),
                        end_date=(date.today() - timedelta(days=1)),
                    ),
                ], width=4),
                dbc.Col([
                    html.Div([
                        dcc.Dropdown(
                            id="year_dropdown",
                            options=[
                                {"label": "All", "value": "All"},
                                *[{"label": year, "value": year } for year in -np.sort(-df["Date"].dt.year.unique())],
                            ],
                            placeholder="Quick Select Year",
                        ),
                    ], className="dash-bootstrap"),
                ], width=4),
            ]),
        ], width=10),
    ]),
])

className dash-bootstrap is simply making the dropdown adapt to dark theme. It didn't affect the result in any way.

Here is how it looks on the page enter image description here

I want the Date picker and Dropdown controls to go side by side.

Monu Yadav
  • 519
  • 2
  • 17
  • When I run your code, I get the date picker and the dropdown on the same line, with some whitespace between them. I displayed it through Firefox and Chrome, can you confirm that this code segment doesn't do what you want? – Daniel Al Mouiee Feb 05 '22 at 01:19
  • Yes I can confirm it. However when I remove the sidebar it works just fine. – Monu Yadav Feb 05 '22 at 05:56
  • That's correct, I omitted the sidebar and it gives what you are looking for. Perhaps you can edit your question to include the sidebar code so we can debug this further? – Daniel Al Mouiee Feb 06 '22 at 01:37
  • I am confused to be honest, I run your edited code and it seems to be showing the datepicker and the dropdown on the same row, even when the sidebar is included. I'm displaying on Firefox and using ```dash==2.1.0```. I am also using the external stylesheet ```dbc.themes.BOOTSTRAP``` when initialising the dash app: ```app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) ``` – Daniel Al Mouiee Feb 06 '22 at 11:42
  • I am using the same version of Dash on a 1920*1080 display with Firefox. Guess I'll have to restrict it with external css. – Monu Yadav Feb 07 '22 at 08:33

0 Answers0