Dropdowns side by side

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

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

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.

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




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)


1 Like