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]

在应用程序声明中？例如，其中包含引导程序特定的 CSS，它为引导程序组件正常工作提供了大量必要的 CSS。这几乎就是它们的全部实用性，CSS 样式都是标准化的，并且为您完成，因此您无需这样做。再加上

dcc

或

html

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

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

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}
    )