CODEWITHSUNDEEP
javascriptcsstypescriptangular7ng-zorro-antd
Hoang Do
Hoang Do

Reputation: 31

Ng-Zorro nz-range-picker overflow on mobile screen

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

Upvotes: 0

Views: 2659

Answers (3)

user28654280
user28654280

Reputation: 1

I faced a similar issue while using nz-range-picker in an Angular project. The problem was that horizontal scrolling wasn't working on mobile browsers. This happens because the overlay element created by Angular CDK (cdk-overlay-connected-position-bounding-box) has fixed styles that might not suit smaller screens, especially when the parent element has overflow-x: hidden or overflow: hidden.

Solution: After debugging, I found the following CSS resolves the issue:

::ng-deep .cdk-overlay-connected-position-bounding-box {
    width: 85% !important;
    overflow-x: auto !important;
}

Explanation

  1. ::ng-deep: This selector is used to apply styles to elements inside child components or elements created dynamically, like the overlay in this case. Since I am using Angular 18, ::ng-deep is still supported.
  2. .cdk-overlay-connected-position-bounding-box: This is the container for the overlay created by Angular CDK. By default, it may not adjust properly for smaller screens.
  3. width: 85% !important: Reduces the width of the overlay to fit better within mobile screens.
  4. overflow-x: auto !important: Enables horizontal scrolling for the overlay when the content exceeds the container width.

How to Use: Add this CSS to your global stylesheet (e.g., styles.css or styles.scss):

::ng-deep .cdk-overlay-connected-position-bounding-box {
    width: 85% !important;
    overflow-x: auto !important;
}

Notes

This solution worked perfectly in my case with Angular 18 and ng-zorro-antd v7.0.0-rc3. Let me know if you encounter any issues, and I’d be happy to help!

Upvotes: 0

Praveen Kumar
Praveen Kumar

Reputation: 11

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

Upvotes: 1

Hoang Do
Hoang Do

Reputation: 31

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

Upvotes: 2

Related Questions