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、TimePicker等组件在非body出现滚动条时,滚动时位置有bug #3487

Closed
smilce opened this issue Oct 19, 2016 · 6 comments
Closed
Labels
❓FAQ issues would be discussed a lot

Comments

@smilce
Copy link

smilce commented Oct 19, 2016

  • antd 版本:1.9.1
  • 操作系统及其版本:所有操作系统
  • 浏览器及其版本:所有浏览器

问题描述

select、TimePicker等组件,当放置到某节点,并且这个节点有滚动条时,当这个节点滚动时,弹出的option层、日历选择层等停留在原有位置,不跟随滚动。这个问题还是挺常见的,比如将这类控件放到Modal里、放到Table里等(放入的这些控件自己设置了overflow:auto)。

问题原因

弹出的层放到了和初始展示节点不同的节点中,导致了弹出层是相对于body进行绝对定位,而当初始展示节点在一个带滚动条的节点时,这个节点在滚动时,body并没有变化,就造成了弹出层不随浏览器滚动的问题。这个应该是rc-select等底层组件的bug。

示例

打开 TimePicker官方API在控制台将.code-box的样式增加

height: 100px;
overflow: auto;

在任意一个例子中点击组件弹出日历弹出层,然后滚动那个节点的滚动条

建议解决方式

将弹出的层放到了和初始展示节点放到同一个父节点中,弹出层相对于这个父节点进行绝对定位。

@afc163
Copy link
Member

afc163 commented Oct 19, 2016

getPopupContainer

https://ant.design/components/select/#Select-props

@afc163
Copy link
Member

afc163 commented Oct 19, 2016

#1947
#2122
#2466
#991
#1503

@afc163 afc163 closed this as completed Oct 19, 2016
@smilce
Copy link
Author

smilce commented Oct 20, 2016

多谢

@lock
Copy link

lock bot commented May 3, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@gubendiran
Copy link

gubendiran commented Aug 5, 2019

@afc163 I was used component more than 300 places in App. I wanted to fix and implement the recommended code for the scrolling issue to update all the places in my app like below; <Select getPopupContainer={trigger => trigger.parentNode}> so, it's very hard to implement for all code editing. It's possible to fix it from single place with out updating all the component places. in my app

@afc163
Copy link
Member

afc163 commented Aug 6, 2019

@gubendiran https://ant.design/components/config-provider/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❓FAQ issues would be discussed a lot
Projects
None yet
Development

No branches or pull requests

3 participants