dbc.themes.FLATLY makes dash_table presentation dropdown not displaying the .Select-menu-outer css ( display:none )

[kyoshizzz]

• dash version: 2.18.2
• dash-bootstrap-components version: 1.6.0
• components affected by bug:
  dash_table 5.0.0

i think there is something wrong with dbc.themes.FLATLY recently,

my dash_table presentation dropdown
className .Select-menu-outer css suddenly become display:none,

when i exclude dbc.themes.FLATLY on
Dash(__name__,external_stylesheets=[dbc.themes.FLATLY] it works just fine

[AnnMarieW]

Hi @kyoshizzz
Can you please include a minimal example that reproduces the issue? Can you say which versions of dash and dbc have the issues and when it changed?

[kyoshizzz]

here is the code
i use dash==2.8.2 , dash_bootstrap_components==1.6.0

i think it happens around 1 month ago,
i just debugging it one by one, and when i remove the styleDMC.append(dbc.themes.FLATLY) then it will work as it is

from dash import Dash,dash ,dash_table,html
import dash_ag_grid as dag
import dash_html_components as html
import pandas as pd
from collections import OrderedDict
import dash_mantine_components as dmc
import dash_bootstrap_components as dbc
from flask import Flask
from dash_labs import plugins

server = Flask(__name__)

dash._dash_renderer._set_react_version('18.2.0')
styleDMC = dmc.styles.ALL
styleDMC.append(dbc.themes.FLATLY)
app = Dash(__name__,
           server= server,
           prevent_initial_callbacks='initial_duplicate',
           suppress_callback_exceptions=True,
           meta_tags=[
            {
                'charset': 'utf-8',
            },
            {
                'name': 'viewport',
                'content': 'width=device-width, initial-scale=1, shrink-to-fit=no'
            }
        ],
           external_stylesheets=styleDMC)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))

app.layout = dmc.MantineProvider( id="mainapp",
    children=[
            dash_table.DataTable(
                        id='table-dropdown',
                        data=df.to_dict('records'),
                        columns=[
                            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
                            {'id': 'temperature', 'name': 'temperature'},
                            {'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
                        ],

                        editable=True,
                        dropdown={
                            'climate': {
                                'options': [
                                    {'label': i, 'value': i}
                                    for i in df['climate'].unique()
                                ]
                            },
                            'city': {
                                 'options': [
                                    {'label': i, 'value': i}
                                    for i in df['city'].unique()
                                ]
                            }
                        }
                    ),])

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

[tcbegley]

Hi @kyoshizzz, thanks for the example and sorry for the slow reply.

I think the issue is a clash between Bootstrap defined styles for the .dropdown class and what react-select (which is creating the dropdowns) is expecting?

In any case, I think I was able to fix the issue by adding the following line to the DataTable constructor

css=[{"selector": ".dropdown", "rule": "position: static"}]

Please let me know if this resolves your issue.

Full example based on yours, but simplified a bit

import dash_bootstrap_components as dbc
from dash import Dash, dash_table

app = Dash(external_stylesheets=[dbc.themes.FLATLY])

data = [
    {"climate": "Sunny", "temperature": 13, "city": "NYC"},
    {"climate": "Snowy", "temperature": 43, "city": "Montreal"},
    {"climate": "Sunny", "temperature": 50, "city": "Miami"},
    {"climate": "Rainy", "temperature": 30, "city": "NYC"},
]
climates = ["Snowy", "Sunny", "Rainy"]
cities = ["Miami", "Montreal", "NYC"]

app.layout = dbc.Container(
    dash_table.DataTable(
        id="table-dropdown",
        data=data,
        columns=[
            {"id": "climate", "name": "climate", "presentation": "dropdown"},
            {"id": "temperature", "name": "temperature"},
            {"id": "city", "name": "city", "presentation": "dropdown"},
        ],
        editable=True,
        dropdown={
            "climate": {
                "options": [
                    {"label": climate, "value": climate} for climate in climates
                ]
            },
            "city": {"options": [{"label": city, "value": city} for city in cities]},
        },
        css=[{"selector": ".dropdown", "rule": "position: static"}],
    ),
    className="p-3",
)

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