Question

我正在使用角度为7.2.4的ng-zorro-antd 7.0.0 rc3。

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

但是我找不到解决此问题的元素。

我去了Ng-Zorro的文件，看来他们也有这个问题：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;
    }
  }
}

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

1 个答案: