Plotly Dash 日期选择器范围显示在输入下方

Question

我正在 Python 中使用 Plotly Dash 构建一个仪表板，并在我的布局上添加了一个日期选择器范围输入。当我打开日期选择器时，问题就来了，日历显示了一些下面的输入（但不是全部）。

我不知道如何解决这个问题，我已经尝试添加样式属性：

style = {'container': 'body'}

我所有输入的代码如下：

controls = dbc.FormGroup(
    [
        html.P('Select Dates', style={
            'textAlign': 'center'
        }),
        dcc.DatePickerRange(
            id='date-picker-range',
            min_date_allowed=min_date,
            max_date_allowed=max_date,
            initial_visible_month=datetime.datetime(datetime.datetime.today().year, 1, 1).date(),
            # end_date=max_date,
            show_outside_days=True,
            day_size=32,
            display_format='DD/MM/YYYY',
            clearable=True
        ),
        html.Br(),
        html.Br(),
        html.P('Time Serie by', style={
            'textAlign': 'center'
        }),
        dbc.Card([dbc.RadioItems(
            id='radio_items',
            options=[{
                'label': 'Month',
                'value': 'M'
            },
                {
                    'label': 'Week',
                    'value': 'W'
                },
                {
                    'label': 'Day',
                    'value': 'D'
                }
            ],
            value='M',
            style={
                'margin': 'auto'
            }
        )]),
        html.Br(),
        html.P('Dropdown', style={
            'textAlign': 'center'
        }),
        dcc.Dropdown(
            id='dropdown',
            options=[{
                'label': 'Value One',
                'value': 'value1'
            }, {
                'label': 'Value Two',
                'value': 'value2'
            },
                {
                    'label': 'Value Three',
                    'value': 'value3'
                }
            ],
            value=['value1'],  # default value
            multi=True
        ),
        html.Br(),
        html.P('Range Slider', style={
            'textAlign': 'center'
        }),
        dcc.RangeSlider(
            id='range_slider',
            min=0,
            max=20,
            step=0.5,
            value=[5, 15]
        ),
        html.Br(),
        dbc.Button(
            id='submit_button',
            n_clicks=0,
            children='Submit',
            color='primary',
            block=True
        ),
    ]
)

但它并没有真正做任何事情。在这里，我附上问题的屏幕截图。我想它可以用 CSS 解决，但我真的不知道该怎么做，所以如果你们中的任何人能给我一个提示，我会很高兴。

此致。

Answer 1

你有没有记得放：

external_stylesheets=[dbc.themes.BOOTSTRAP]

在应用程序声明中？它将包含 bootstrap-specific CSS，例如，它为 bootstrap 组件正常工作提供了许多必要的 CSS。这几乎是他们的全部效用是 CSS 样式全部标准化并为您完成，因此您不必这样做。加上 dcc 或 html.

中不可用的一些其他简洁组件

如果您确实包含了样式表参考，那是非常奇怪的重叠行为，并且 helpful/if 如果您可以提供整个 dash 项目源代码（所以回答可以复制粘贴并且它可以正常工作并且重现你所面临的完全相同的问题）或者更好的是从源代码创建的最小版本，但我不介意查看你的整个应用程序来剖析它是否有帮助

Answer 2

正如同事@Siddarth Bhansali 所说，添加和增加 z-index 对我来说解决了这个问题。考虑到在 Plotly Dash 中，我们需要使用驼峰拼写法来表示带连字符的属性名称。在我的例子中，以下代码运行良好：

dcc.DatePickerRange(
        id='date-picker-range',
        min_date_allowed=min_date,
        max_date_allowed=max_date,
        initial_visible_month=datetime(datetime.today().year, 1, 1).date(),
        # end_date=max_date,
        show_outside_days=True,
        day_size=32,
        display_format='DD/MM/YYYY',
        clearable=True,
        style={'zIndex': 10}
    )

Plotly Dash 日期选择器范围显示在输入下方

Plotly Dash Date Picker Range show underneath inputs

css

datepicker

plotly-dash

plotly-python