日历 Dash 组件在盒子外面

Question

我在应用程序破折号中遇到问题，屏幕截图将直接显示它：

您可以看到日历日超出了日历框。

为了创建它，我简单地在布局中使用 DateRangePicker 组件

dmc.DateRangePicker(
    id='calendar_id',
    style={"width": "100%"},
    placeholder='Date Range...'
),

如果你想要更多的布局代码，它看起来就像这样（我已经清理了一点以避免放太多东西）：

layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.Label(
                        'Some Label:',
                        className='bold-text'
                    ),
                    dcc.Dropdown(
                        id='dropdown_id',
                        options=[{'label': i, 'value': i} for i in ['a', 'b']]
                    ),
                    html.Br(),
                    dmc.DateRangePicker(
                        id='calendar_id',
                        style={"width": "100%"},
                        placeholder='Date Range...'
                    )
                ])
            ], className="mb-4"),  # Margin bottom
        ], md=5),
        dbc.Col([
                #other code
        ], md=7)
    ]),
], fluid=True)

Answer 1

我猜测问题是由于类

max-width

上的

.mantine-DatePicker-calendarBase

属性造成的。它应该通过将其添加到您的 css 来重置

max-width

属性来工作：

.mantine-DatePicker-calendarBase {
  max-width: initial;
}