Hi everyone,
Am trying to build a Dash dashboard where user selects a value from the dropdown and selects date range from the date picker and the datatable gets updated according to the selected values and date range. But the problem am facing is the drop down is not completely visible because of the Data table. Am not able to view all of the drop down options because of the data table .
PFB the app layout code which am using:
app.css.append_css({“external_url”: “https://codepen.io/chriddyp/pen/bWLwgP.css”})
app.layout=html.Div([html.H2(“Select Sheet Number”),
html.P([
html.Label("Choose a feature"),
dcc.Dropdown(
id='field-dropdown_cip',
options=[
{'label': i, 'value': i} for i in
(['all'] + list(df['manager'].unique()))],
value='all',
multi=True
)
])
,
html.Div([
html.H3('Select start and end dates:'),
dcc.DatePickerRange(
id='my_date_picker',
min_date_allowed=datetime(2015, 1, 1),
max_date_allowed=datetime.today(),
start_date=datetime(2019, 3, 1),
end_date=datetime.today()
)
], style={'display':'inline-block'}),
html.Div([dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
n_fixed_columns=2,
style_table={'maxWidth': '1500px'},
style_cell = {"fontFamily": "Arial", "size": 10, 'textAlign': 'left'},
data=df.to_dict("rows"))])
])