'How do I place label above my dropdown menus and DatePickerSingle in dash
Label works for Dropdown but the moment you add DatePickerSingle label comes next to it instead of above like dropdowns.
Similar to the question here where user has Slider so tried that way but no luck after various attempts.
Is there a way to adjust height of the DatePickerSingle as well to match that of Dropdowns?
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('MyDatePicker', style={'font-weight': 'bold', "text-align": "center"}),
dcc.DatePickerSingle(
calendar_orientation='vertical',
placeholder='Select a date',
date=date(2017, 6, 21)
),
], 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)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
