javascript - Ng-Zorro nz-range-picker 在手机屏幕上溢出

Question

我正在使用带有 Angular 7.2.4 的 ng-zorro-antd 7.0.0 rc3。

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

但我找不到解决这个问题的元素。

我去看了吴佐罗的资料，好像也有这个问题:https://ng.ant.design/components/date-picker/en#header

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

谁能帮我解决这个问题？

Range picker cannot scroll when over-flow-x on mobile screen

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