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

Posted 2023-03-13

【中文标题】手机屏幕上的 Ng-Zorro nz-range-picker 溢出

【英文标题】：Ng-Zorro nz-range-picker overflow on mobile screen

【发布时间】：2019-07-10 05:19:24

【问题描述】：

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

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

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

我查看了 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

【问题讨论】：

您始终可以通过将封装添加到 none 并覆盖精确的 css 样式来覆盖 css 样式。或者，您可以使用 @angular/flex-layout 来确保通过将 [ngClass.xs] 与元素一起应用来减小屏幕尺寸时应用的特定宽度类别。

另一种选择是使用modal dialog。

@AlokeT 谢谢！我已经做出响应式选择器，以便在移动设备上垂直显示。之前想过让容器在溢出时可以滚动，我浪费了太多时间，但找不到确切的元素。但是现在，当我想到差异时，事情变得更容易了。

是的，你明白了......如果你的方法采用不同的方式，设计会更加简单和创新。

顺便说一句，您可以添加自己的答案并接受它，因此它将不再打开。

【参考方案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;