Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select/Datepicker/Cascader menu position not fixed when scrolling in some layout #6029

Closed
rppig42 opened this issue Nov 9, 2020 · 5 comments

Comments

@rppig42
Copy link
Contributor

rppig42 commented Nov 9, 2020

Reproduction link

https://stackblitz.com/edit/angular-qdkmuq?file=src/app/app.component.ts

Steps to reproduce

  1. click the select control to open menu
  2. scroll outside the control

What is expected?

  1. menu position is fixed

What is actually happening?

  1. menu position scrolls
Environment Info
ng-zorro-antd 10.1.0
Browser Chrome latest

it may have something to do with aa4ac2b

@vthinkxie
Copy link
Member

vthinkxie commented Nov 9, 2020

@vthinkxie vthinkxie added 📜 Doc ❓ FAQ Frequently asked questions. labels Nov 9, 2020
@msyesyan
Copy link
Contributor

@vthinkxie 这种方式解决感觉不是很优雅。主要是对于一般的使用者来说,我们是没有cdkOverlay 这个概念的(假定我们项目里不使用这个组件),可是却为了这个问题要去在一个 container 上去写一个 cdkScrollable 的 directive.

另外其实我们还遇到了另一个问题,就是我们的 header 是 fixed to top 的,然后当我们设置了全局的 scrollable 之后,有些 nz-select 的下拉弹框随着滚动会直接盖住 header, 这个看起来就不是很对。而如果我们又通过修改了 header 的 z-index 使其大于 cdkOVerlay 的 1000 的 z-index 的话,又会导致 nz-drawer 使用不了(nz-drawer 的头部无法遮盖住 header。

我在 https://material.angular.io/cdk/text-field/overview 的官网上其实体验了一下 text field, 它们的做法是在有 select 框打开的状态下,禁止页面滚动。您可以试一下,我觉得这个行为也是蛮合理的。咱们的 nz-select 可以稍微按照这个思路坐下改动么?或者暴露个接口出来可以让我们方便的设置成这个行为也可以。您觉得呢 @vthinkxie

@vthinkxie
Copy link
Member

可以增加一个全局配置,用于配置这部分的行为,@msyesyan 有兴趣提个PR吗

@msyesyan
Copy link
Contributor

msyesyan commented Dec 17, 2020

好的,我们研究下. 我刚才试了一下原生 html 的 select 在打开的时候页面也是不能滚动的,我觉得确实可以搞一下

@AlaneLiang
Copy link

AlaneLiang commented Mar 24, 2021

This PR(#6380) can solve this problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants