NG-ZORRO/ng-zorro-antd

Select It overlaps, this is caused because the options are opened from the cdk-overlay-container and its z index

Closed this issue · 2 comments

Eljaduen commented

Reproduction link

https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

Just activate the select and scroll with a fixed header, Also when you have a virtual or internal scroll, the options remain fixed in the view and do not move with their parent container.

What is expected?

that does not generate the cdk outside the div of the nz-select component so that its z index can be controlled as desired

What is actually happening?

Just activate the select and scroll with a fixed header, Also when you have a virtual or internal scroll, the options remain fixed in the view and do not move with their parent container.

Environment Info
ng-zorro-antd 18.1.1
Browser Alls
ParsaArvanehPA commented

Hi @Eljaduen
Thank you for reporting this issue

For the options being stuck when scrolling issue, a fix has been made. #7865
As for the issue with the fixed header, this behavior is expected, because when CDK creates the overlay, it gives it a z-index: 1000 to it; give the fixed element a z-index with value greater than 1000 and you'd be good to go.

for your first issue, as a temporary fix, you can follow these steps:

  • Create a wrapper inside your modal or drawer
  • Add the cdkScrollable directive to the wrapper
  • Set overflow: auto on the wrapper

This way, the wrapper will handle the scrolling.
You can refer to this link for a sample.