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

Table组件的ant-spin在可滚动区域的定位问题 #2652

Closed
cagen opened this issue Aug 9, 2016 · 5 comments
Closed

Table组件的ant-spin在可滚动区域的定位问题 #2652

cagen opened this issue Aug 9, 2016 · 5 comments

Comments

@cagen
Copy link

cagen commented Aug 9, 2016

本地环境

  • antd 版本: 1.8.0
  • 操作系统及其版本:OSX 10.11.5 (15F34)
  • 浏览器及其版本: Chrome 51.0.2704.84 (64-bit)

可重现的在线演示

http://codepen.io/anon/pen/LkXbPp?editors=0010
将Table放置于一个固定高度的可滚动区域内,在Table之前设置一个可变高度的DIV。
点击展开按钮,灰色区域会逐渐增加,当灰色区域增高到超过一定程度之后(超过窗口高度),会发现一开始不能滚动的Body区域可以滚动了,Body区域的高度增加了。Debug发现是因为<div class="ant-spin"></div>这个元素是绝对定位的,但没有设定具体定位的值,且外层也没有position为非static的元素让它相对其定位。它会随着灰色区域的增高和增加top值,最后就会顶出<div class="box"></div>的区域。

正常时候的情况:
image

不正常时候的情况:
qq20160809-0

@benjycui
Copy link
Contributor

不是很能理解,能再详细描述下?

@cagen
Copy link
Author

cagen commented Aug 10, 2016

2
@benjycui
抱歉,说的确实有些不清楚,请看我的录屏吧
出现这个BUG是要在特定情况下的

  1. 外层有个DIV是scroll的
  2. 在Table之前的同级DOM元素中有个元素的高度会变化

然后像我的操作一样,当Table上面那个元素变化后,<div class="ant-spin" />的top值就会随之改变,有时候自个就飞出了Table的区域(因为Table在scroll的DIV里,而spin是position: absolute的,且此时spin相对的是body做的定位),最后看到的现象就是spin飞出了好远,把body都顶高了。

afc163 added a commit that referenced this issue Aug 12, 2016
@afc163
Copy link
Member

afc163 commented Aug 12, 2016

理解起来比较难,但我觉得上面这样可以修复。

@afc163 afc163 closed this as completed Aug 12, 2016
@cagen
Copy link
Author

cagen commented Aug 12, 2016

嗯,确实可以修复。
我本来以为需要在外层div加一个类似.ant-spin-nested-loading的类,去让<div class="ant-spin" />相对其定位。

@lock
Copy link

lock bot commented May 4, 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 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants