In the last couple of rows of a datatable the dropdowns are not visible. They are always being cut off. Is there a way to have the dropdown pop above the datatable itself so it’s always visible? I have provided an example below. Could this be done thru override CSS? I am using a bootstrap theme with the dash app and I think this is causing the problem, because once I remove the bootstrap theme it works with the pop out visual.
Your code example isn’t using Dash or plotly.py… Can you share a simple, reproducible example that uses Dash and Python?
Yea the example above was just to demonstrate the issue. I’m using a basic dash DataTable in python and applying a bootstrap theme and having issues with the dropdown getting cut off. This seems to be a known issue with that styling library. When I include bootstrap it creates this problem. Once it’s removed it’s fine and works correctly without being cut off.
I’m using this theme:
external_stylesheets=[dbc.themes.LUX]
This is an example of datatable being used:
@dash_app.callback(Output('postgres_datatable', 'children'),
[Input('interval_pg', 'n_intervals')])
def populate_datatable(n_intervals):
df = pd.read_sql_table('testEmails4', con=dbSQL.engine)
return [
dash_table.DataTable(
id='our-table',
columns=[
{'id': 'first_name', 'name': 'First Name', 'type': 'text',
'on_change': {
'action': 'coerce'
}},
{'id': 'last_name', 'name': 'Last Name', 'type': 'text', 'on_change': {
'action': 'coerce'
}},
{'id': 'email_address', 'name': 'Email Address', 'type': 'text', 'on_change': {
'action': 'coerce'
}},
{'id': 'valid_submission', 'name': 'Valid Submission', 'type': 'text',
'presentation': 'dropdown', 'on_change': {
'action': 'coerce'
}},
{'id': 'amount', 'name': 'Amount', 'type': 'numeric', 'on_change': {
'action': 'coerce',
'failure': 'reject'
}},
],
data=df.to_dict('records'),
export_format="csv",
fixed_rows={'headers': True},
editable=True,
virtualization=False,
dropdown={
'valid_submission': {
'options': [ # 'options' represents all rows' data under that column
{'label': i, 'value': i}
for i in df['valid_submission'].unique()
],
'clearable': True
}
},
row_deletable=True,
style_data={'border': '1px solid black'},
filter_action="native",
sort_action="native", # give user capability to sort columns
sort_mode="single", # sort across 'multi' or 'single' columns
# render all of the data at once. No paging.
page_action='none',
style_table={'height': '400px',
'overflowY': 'auto', 'padding-bottom': '10px', 'box-shadow': '5px 5px 10px 3px rgba(0, 0, 0, 0.39)'},
style_cell={'textAlign': 'left', 'minWidth': '100px',
'width': '100px', 'maxWidth': '100px', 'fontSize': '14px'},
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold',
'fontSize': '14px',
'color': 'black',
'border': '1px solid black'
},
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
},
{
'if': {
'filter_query': '{valid_submission} = Yes',
'column_id': 'valid_submission'
},
'backgroundColor': '#52AB82',
'fontWeight': 'bold',
'color': 'white'
},
{
'if': {
'filter_query': '{amount} > 500',
'column_id': 'amount'
},
'fontWeight': 'bold',
'backgroundColor': '#038C8C',
'color': 'white'
},
{
'if': {
'filter_query': '{first_name} is blank',
'column_id': 'first_name'
},
'backgroundColor': '#D96055'
},
{
'if': {
'filter_query': '{last_name} is blank',
'column_id': 'last_name'
},
'backgroundColor': '#D96055'
},
{
'if': {
'filter_query': '{email_address} is blank',
'column_id': 'email_address'
},
'backgroundColor': '#D96055'
},
{
'if': {
'filter_query': '{valid_submission} is blank',
'column_id': 'valid_submission'
},
'backgroundColor': '#D96055'
},
{
'if': {
'filter_query': '{amount} is blank',
'column_id': 'amount'
},
'backgroundColor': '#D96055'
},
],
style_cell_conditional=[
{
'if': {'column_id': c},
'textAlign': 'right'
} for c in ['valid_submission', 'amount']
],
),
]