破折号数据表未在单元格中显示下拉值答案

【问题标题】：Dash DataTable Not Displaying Dropdown Values in Cell破折号数据表未在单元格中显示下拉值
【发布时间】：2021-03-27 14:42:45
【问题描述】：

我需要创建一个 DataTable，它需要逐行进行相当精细的可编辑输入。其中许多需要带有预定义值的下拉菜单。

我正在尝试与the following example 一起了解如何在 DataTable 中实现下拉菜单，但由于某种原因，我的表没有显示实际的下拉值，我不知道为什么。

这是我的示例：

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
from sqlalchemy import create_engine
from return_matrix import create_final_datatable
from dash.dependencies import Input, Output, State
from dash_table import DataTable

#### Global Variables Which Will Not Need to Be Changed

table_columns = [{
        "id": "Label",
        "name": "Label",
        "type": "text"
        }, {'id': 'Calc1', 'name': 'Calc1', 'presentation': 'dropdown'}]
        

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.COSMO], suppress_callback_exceptions=True)

app.layout = html.Div([
        
        dbc.Container(id='main-container', fluid=True, children=[
                html.H3("Data Explorer", style={'text-align': 'center'}),
                dbc.Row(dbc.Col(children=[DataTable(id='input-table', editable=True,
                          columns  = table_columns,
                          dropdown = {
                                  'Calc1': {
                                  'options': [
                                  {'label': i, 'value': i}
                    for i in ['FILTER', 'FWDRET', 'RATIO']
                ]
            }}, data=[{'Label': 'Beginning Label', 'Calc1': 'FILTER'}]),
                html.Div(id="table-dropdown")], width={"size": 8, "offset":2}))
            ])
        ])
                
if __name__ == '__main__':
    app.run_server(port=8051)

我完全不清楚我们的两个示例有什么不同。

【问题讨论】：

标签： plotly plotly-dash plotly-python

【解决方案1】：

我遇到了这个问题并解决了这个问题

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

因此，在您的 css 文件中创建或添加此代码。

【讨论】：

【解决方案2】：

您还可以将以下内容添加到dash_table.DataTable()：

css = [{
    "selector": ".Select-menu-outer",
    "rule": 'display : block'
}]

【讨论】：

糟糕应该是：css=[ {"selector": ".Select-menu-outer", "rule": 'display : block !important'} ]