Dropdowns side by side

Dash Python
1

How can I have 2 dropdowns side by side, something like this in plotly.

dp
dp1600×72 16.7 KB

2

Hi @m_Shah and welcome to the Dash community :slight_smile:

To place two dropdowns – or any elements side by side, I recommend using the dash-bootstrap-components (or dash-mantine-components) library.

Here’s an example:


from dash import Dash, dcc
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container([
    dbc.Row([dbc.Col(dcc.Dropdown()), dbc.Col(dcc.Dropdown())])
])

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

This worked. But I have a question. How to fix the layout for these dropdowns? You can see in the figure, I want the dropdown to start from the heading of the scatter plot. But it starts a little later after that.

sp1
sp1931×566 39.7 KB

4

Hi @m_Shah

You can adjust the margin of the dropdowns, however, the figure is responsive --the margin for the title is different based on screen size, so it will be difficult to match. Note the position of the title in the different screen sizes below.

One solution is to add a border to the figure (or put it inside a dbc.Card), then you can see that the elements are aligned.

image

image
image1776×395 20.1 KB 

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

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

state_dropdown = html.Div(
    [
        html.Label("Select state", htmlFor="state-dropdown"),
        dcc.Dropdown(id="state-dropdown"),
    ]
)

variable_dropdown = html.Div(
    [
        html.Label("Select variable", htmlFor="variable-dropdown"),
        dcc.Dropdown(id="variable-dropdown"),
    ]
)

graph = dbc.Card(dcc.Graph(figure=px.scatter(title="figure title")), className="mt-2")

app.layout = dbc.Container(
    [
        html.H2("My Title", className="text-center"),
        dbc.Row([dbc.Col(state_dropdown), dbc.Col(variable_dropdown)]),
        dbc.Row(dbc.Col(graph)),
    ],
    fluid=True,
)

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