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 · 4 comments

Comments

Projects
None yet
2 participants
@smilce

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

This comment has been minimized.

Member

afc163 commented Oct 19, 2016

@afc163

This comment has been minimized.

Member

afc163 commented Oct 19, 2016

@afc163 afc163 closed this Oct 19, 2016

@smilce

This comment has been minimized.

smilce commented Oct 20, 2016

多谢

@lock

This comment has been minimized.

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.

@lock lock bot locked as resolved and limited conversation to collaborators May 3, 2018

@afc163 afc163 added the FAQ label Oct 6, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.