Dropdown in a column table and Bootstrap

[Eduardo]

Hi

I’m facing a problem to use a dropdown column in a table using Bootstrap.

The second example from the Dash Docs works Ok.

Dropdowns Inside DataTable | Dash for Python Documentation | Plotly

This is the result that shows the options in a dropdown:

But adding Bootstrap to the code it didn’t work:

Here is the code with the Boostrap changes:

import dash
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict

import dash_bootstrap_components as dbc


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

df_per_row_dropdown = pd.DataFrame(OrderedDict([
    ('City', ['NYC', 'Montreal', 'Los Angeles']),
    ('Neighborhood', ['Brooklyn', 'Mile End', 'Venice']),
    ('Temperature (F)', [70, 60, 90]),
]))


app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dash_table.DataTable(
                id='dropdown_per_row',
                data=df_per_row_dropdown.to_dict('records'),
                columns=[
                    {'id': 'City', 'name': 'City'},
                    {'id': 'Neighborhood', 'name': 'Neighborhood', 'presentation': 'dropdown'},
                    {'id': 'Temperature (F)', 'name': 'Temperature (F)'}
                ],
        
                editable=True,
                dropdown_conditional=[{
                    'if': {
                        'column_id': 'Neighborhood', # skip-id-check 
                        'filter_query': '{City} eq "NYC"'
                    },
                    'options': [
                                    {'label': i, 'value': i}
                                    for i in [
                                        'Brooklyn',
                                        'Queens',
                                        'Staten Island'
                                    ]
                                ]
                }, {
                    'if': {
                        'column_id': 'Neighborhood',
                        'filter_query': '{City} eq "Montreal"'
                    },
                    'options': [
                                    {'label': i, 'value': i}
                                    for i in [
                                        'Mile End',
                                        'Plateau',
                                        'Hochelaga'
                                    ]
                                ] 
                },
                {
                    'if': {
                        'column_id': 'Neighborhood',
                        'filter_query': '{City} eq "Los Angeles"'
                    },
                    'options': [
                                    {'label': i, 'value': i}
                                    for i in [
                                        'Venice',
                                        'Hollywood',
                                        'Los Feliz'
                                    ]
                                ] 
                }]
            ),
            html.Div(id='dropdown_per_row_container')
        ])
    ])
])


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

Please any help to understan what I’m missing

[adamschroeder]

Hi @Eduardo
You’re right. Thanks for the code. I tried it as well. As soon as I take out Bootstrap app = dash.Dash(__name__), the dropdown inside the datatable works again.
@tcbegley @AnnMarieW Would you happen to know what might be causing this? Do you think there is a clash with the CSS and the DataTable dropdown?

[AnnMarieW]

Hi @Eduardo @adamschroeder

Yes, there is some conflict with the CSS and I think it’s fixed and should be in the next release (Dash 2.1). But in the meantime, if you add this to the css file in the assets folder, it will work:

/* fixes  when the table dropdown doesn't drop down */
.dash-table-container .dropdown {
  position: static;
}

[Eduardo]

Hi @AnnMarieW

Thanks a lot !!!

It works