Search code examples
pythonplotlydashboardplotly-dash

How to name to the dropdown menu in Dash/Plotly

I'm pretty new to dash and I'm trying to figure out how do I place names above my dropdown menus and sliders and provide some gap between the them. I'm geeting these names "Dataset","model types" on the side instead of on the top of the dropdowns.This is the code I have been using :

enter image description here

    html.Div(className='row', children=[
        html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),

 
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-dataset',
            options=[
                {'label': 'Diabetes', 'value': 'diabetes'},
                {'label': 'Boston Housing', 'value': 'boston'},
                {'label': 'Sine Curve', 'value': 'sin'}

            ],
            value='diabetes',
            searchable=False,
            clearable=False,

        ), style=dict(width='33%')),

        html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-select-model',
            options=[
                {'label': 'Linear Regression', 'value': 'linear'},
                {'label': 'Lasso', 'value': 'lasso'},
                {'label': 'Ridge', 'value': 'ridge'},
                {'label': 'Polynomial', 'value': 'polynomial'},
                {'label': 'elastic-net', 'value': 'elastic-net'},

            ],
            value='linear',
            searchable=False,
            clearable=False
        ),style=dict(width='33%')),

        html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-custom-selection',
            options=[
                {'label': 'Add Training Data', 'value': 'training'},
                {'label': 'Add Test Data', 'value': 'test'},
                {'label': 'Remove Data point', 'value': 'remove'},
            ],
            value='training',
            clearable=False,
            searchable=False
        ),style=dict(width='33%')),
    ],style=dict(display='flex')),

Can someone point out where I'm wrong?

Edit :

I added the following piece of code before my first dropdown and removed every html.Label before every div and this works. Not sure if this is the right approach :

html.Div(className='row', children=[
      html.Div([
        html.Label(['Select Dataset'], style={'font-weight': 'bold', "text-align": "right","offset":1}),
    ], style=dict(width='33%')),

        html.Div([
                    html.Label(['Select Model'], style={'font-weight': 'bold', "text-align": "center"}),
            ], style=dict(width='33%')),
        html.Div([
                    html.Label(['Add Custom Data'], style={'font-weight': 'bold',"text-align": "left"}),
            ], style=dict(width='33%')),
            ],style=dict(display='flex',justifyContent='center')),

enter image description here

Solution

  • You define

    # row
Div([
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])

    But I propose

    # row
Div([
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
])

    or at least

    # row
Div([
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
])

    Minimal working code.

    I removed className="three columns" to remove gaps between columns and I used width="33.33%" to better use width.

    enter image description here

    import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ], style=dict(width='33.33%')),

        
        html.Div(children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),

        html.Div(children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),
    ],style=dict(display='flex')),
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

    CSS file used in code threads full width as 12 columns (similar to other CSS frameworks - ie. Bootstrap) so if you want to create 3 columns with gaps then you should use nameClass="four columns" which means "four of 12 columns" and 4/12 gives width 1/3 - and then you don't have to use style=dict(width='33.33%')

    enter image description here

    import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(className="four columns", children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        
        html.Div(className="four columns", children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        html.Div(className="four columns", children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),
    ],style=dict(display='flex')),
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

    EDIT:

    Of course you can also organize it in separated rows (if it helps you)

    # row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])