Dash Datatable Dropdown and BOOTSTRAP

Dash Python
1

i have a some drop a drop down column who stopped dropping down the select menu when clicking in the cells after added bootstrap styling to my dash application , in other words my dropdown columns would work and be like this
image
if i’m initiing the application with bootstrap (app = dash.Dash(__name__app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP])))
and it would work like this
image

if i’m initiating the dash appliation witout bootstrap (app = dash.Dash(name))

Is there a way to make the dropdown in the datatable work while using dbc ?

1 Like
2

Hi @bahaeleghrissi welcome to the forums. Not sure if I understand you correctly but try this:

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

what i meant is that when i initiate app like you mentionned to use bootstrap the dropdown in the datatable don’t work and dont show the list of options
image

, so the drop down works only when i’m initiating the app like this

# initiate app
app = dash.Dash(
    __name__)
4

Hi @bahaeleghrissi

There is a conflict between the CSS in the DataTable and Bootstrap.

Try adding this to a .css file in the assets folder:

.Select-menu-outer {
  display: block !important;
}

.dash-table-container .dropdown {
  position: static;
}

I also recommend using dash-ag-grid instead of the DataTable. Here’s an example of a built-in HTML Select component as a cell editor:

Here’s an example of a custom component where a dmc.Select is used (note - this isn’t in the dash-docs yet):

5

Aaah ok thank you ! and thanks for the advice !