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.

Sign up for GitHub

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

Jump to bottom

select和dapicker等弹层选择组件窗口漂浮跟随问题 #13444

Closed

1 task

nlx0201 opened this issue Dec 5, 2018 · 1 comment

Closed

1 task

select和dapicker等弹层选择组件窗口漂浮跟随问题 #13444

nlx0201 opened this issue Dec 5, 2018 · 1 comment

nlx0201 commented Dec 5, 2018

I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.11.0

Environment

Chrome V70

Reproduction link

https://ant.design/components/date-picker-cn/

Steps to reproduce

设置body的overflow-y为hidden
设置样式为main-wrapper的div高度为700，overflow-y为auto
点击时间选择控件，向下滑动鼠标，出现时间选择弹层跟随鼠标移动，没有focus在当前时间控件上

What is expected?

时间选择弹层跟随当前焦点的时间控件

What is actually happening?

漂浮在页面上，没有跟随焦点时间控件

解决方案如下：

调整弹层的位置，位于当前时间组件内部，不置于body一级div下面
滚动鼠标时计算position的absolute的实际可视区域的位置与scrolltop一起处理
增加透明弹层遮罩，禁用页面的上的overflow

ant-design-bot assigned yutingzhao1991

Member

afc163 commented Dec 5, 2018

https://ant.design/docs/react/faq-cn#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-%E4%BC%9A%E8%B7%9F%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%B8%8A%E4%B8%8B%E7%A7%BB%E5%8A%A8%EF%BC%9F

afc163 closed this as completed

zombieJ unassigned yutingzhao1991

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