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

Question

I'm using ng-zorro-antd 7.0.0 rc3 with angular 7.2.4.

My problem is: I can not scroll horizontal while using the nz-range-picker on mobile browser, it seem the element was too large with the screen, but the parent of nz-range-picker has "over-flow-x: hidden", or "over-flow: hidden" attribute.

But i can't find what element to fix this.

I went to the documents of Ng-Zorro and it seem that they have had this problem too: https://ng.ant.design/components/date-picker/en#header

I also seen the react version of Ant Design and it doesn't have this problem: https://ant.design/components/date-picker/#header

Can any one help me with this?

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

Answer 1

Thank to AlokeT, I have resolved this problem.

I make the picker display vertical when responsive to mobile.

Add this to src/styles.less (or 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;
    }
  }
}