Ng-Zorro nz-范围选择器在移动屏幕上溢出

Question

我正在使用 ng-zorro-antd 7.0.0 rc3 和 Angular 7.2.4。

我的问题是：在移动浏览器上使用 nz-range-picker 时，我无法水平滚动，看起来该元素与屏幕太大，但 nz-range-picker 的父级有“over-flow-x:隐藏”，或“溢出：隐藏”属性。

但我找不到什么元素来解决这个问题。

我去看了Ng-Zorro的文档，好像他们也遇到了这个问题：https://ng.ant.design/components/date-picker/en#header

我也看到了 Ant Design 的 React 版本，没有这个问题：https://ant.design/components/date-picker/#header

有人可以帮我解决这个问题吗？

移动屏幕上溢出-x时范围选择器无法滚动

Answer 1

感谢AlokeT，我已经解决了这个问题。

我使选择器在响应移动设备时垂直显示。

将其添加到 src/styles.less （或 css | scss）

// @screen-sm-min = 576px, or you can choose another break point
@media only screen and (max-width: @screen-sm-min + 100px) {
  .ant-calendar-range {
    width: 276px;
    .ant-calendar-range-part {
      width: 100%;
    }
    .ant-calendar-range-right {
      float: left;
      border-top: 1px solid #e8e8e8;
    }
  }
}

Answer 2

@media  (max-width: 567px) {
::ng-deep .ant-picker-panel-container .ant-picker-panels{
  display: block !important;
  width: min-content !important;
  overflow-y: auto;
  max-height: 300px;
}
}