Dropdown in table fails with bootstrap

Dash Python
1

I want to use dropdowns in a table, but the menu doesn’t show up.
Capture
The gridline seems to disappear.
When I remove the style sheet for the navigation bar, the table works as expected: the menu shows up.
Capture1
However, how can the nav stylesheet affect the table, and how to provent it from happening?

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_table as dt
import pandas as pd
from collections import OrderedDict

app = dash.Dash(
    __name__#, external_stylesheets=[dbc.themes.BOOTSTRAP]   # <- uncomment for failure
)

df = pd.DataFrame(
    OrderedDict(
        [
            ('format', ['svp', 'svx2'])
        ]
    )
)

app.layout = html.Div(
    dt.DataTable(
        data=df.to_dict('records'),
        columns=[
            {'id': 'format', 'name': 'file format', 'presentation': 'dropdown'}
        ],
        editable=True,
        dropdown={
            'format': {
                'options': [
                    {'label': i, 'value': i}
                    for i in df['format'].unique()
                ]
            }
        }
    )
)

app.run_server(debug=True)
1 Like
2

You can fix this with some custom CSS. See this issue for details, but essentially just add this to a CSS file and link it to your app.

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