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

[Bug Report] Table 在 Flex 布局情况下, 无限加宽的问题 #2716

Open
wenner opened this Issue Feb 7, 2017 · 8 comments

Comments

Projects
None yet
7 participants
@wenner

wenner commented Feb 7, 2017

ElementUI version

1.1.6

OS/Browers version

Win10/Chrome 55

Vue version

2.1.0

Reproduction Link

http://jsfiddle.net/wenner/axxkawzk/13/

Steps to reproduce

flex布局 , 给表格加样式

.el-table{
  height:100%;
  flex: 1 0 0 !important;
  display: flex;
  flex-direction: column
}

.el-table .el-table__body-wrapper {
  flex: 1 0 0 !important;
}

让后再页面中同样进行flex布局,并且横向布局 , 可以看到各种奇怪的

对flex的原理实现并不熟悉,所以不知道是table的问题还是我得布局的问题

像上面例子中

  1. 是正常的 , 怎么改变窗口 都是正常
  2. 这个的表格会宽很多 , 不过如果给 .con 加 style: overflow:hidden 的话 , 开始看起来是正常的, 如果改变下result窗口高度, 那么在table下面会出现滚动条 , 这个滚动条拉倒最左边, 就和表头不一样齐了
  3. 这个会无限的加宽 , 同样如果给.con加 style:overflow:hidden 的话 , 看起来也不正常 (其实,在我自己项目中,这种情况是正常的,而且是那种非常正常的,不过没在重现,因为原项目有别的样式)

What is Expected?

想页面中 1 那样 , 怎么看都是正常的

What is actually happening?

@erguotou520

This comment has been minimized.

Show comment
Hide comment
@erguotou520

erguotou520 Feb 8, 2017

要配合overflow:hidden,我有时候也会遇到这种问题,flex:1或者width:100%并不能保证正好100%,有时候会超出 试试overflow:hidden,有时可能需要父节点加100%,反正我是各种尝试

erguotou520 commented Feb 8, 2017

要配合overflow:hidden,我有时候也会遇到这种问题,flex:1或者width:100%并不能保证正好100%,有时候会超出 试试overflow:hidden,有时可能需要父节点加100%,反正我是各种尝试

@wenner

This comment has been minimized.

Show comment
Hide comment
@wenner

wenner Feb 8, 2017

@erguotou520 是的,真的是各种尝试 , 然后有的时候尝试很多次,突然发现好了..却不知道为什么好的...
也许就这么一直用总也不出问题
也许下一次同样的DOM结构,同样的样式又出问题了

我猜测觉得会不会是table resizer的问题??

wenner commented Feb 8, 2017

@erguotou520 是的,真的是各种尝试 , 然后有的时候尝试很多次,突然发现好了..却不知道为什么好的...
也许就这么一直用总也不出问题
也许下一次同样的DOM结构,同样的样式又出问题了

我猜测觉得会不会是table resizer的问题??

@erguotou520

This comment has been minimized.

Show comment
Hide comment
@erguotou520

erguotou520 Feb 8, 2017

我以前也提过类似的issue,但是没有研究过具体原因

erguotou520 commented Feb 8, 2017

我以前也提过类似的issue,但是没有研究过具体原因

@blooddrunk

This comment has been minimized.

Show comment
Hide comment
@blooddrunk

blooddrunk Jun 5, 2017

facing the same problem when using ELTable as a flex item, adding width: 100% and overflow: hidden doesn't really solve the problem. Ended up with absolute positioning instead of flex laylout

blooddrunk commented Jun 5, 2017

facing the same problem when using ELTable as a flex item, adding width: 100% and overflow: hidden doesn't really solve the problem. Ended up with absolute positioning instead of flex laylout

@getyouyou

This comment has been minimized.

Show comment
Hide comment
@getyouyou

getyouyou Aug 23, 2017

.el-table__header{
table-layout: auto !important;
}
I add this css style

getyouyou commented Aug 23, 2017

.el-table__header{
table-layout: auto !important;
}
I add this css style

@furybean

This comment has been minimized.

Show comment
Hide comment
@furybean

furybean Feb 8, 2018

Member

在 2.1.0 中已经无法重现,请确认:http://jsfiddle.net/axxkawzk/15/

Member

furybean commented Feb 8, 2018

在 2.1.0 中已经无法重现,请确认:http://jsfiddle.net/axxkawzk/15/

@furybean furybean changed the title from El-table中在flex布局情况下,无限加宽的问题 to [Bug Report] Table 在 Flex 布局情况下, 无限加宽的问题 Feb 8, 2018

@ccqgithub

This comment has been minimized.

Show comment
Hide comment
@ccqgithub

ccqgithub Apr 4, 2018

遇到同样问题,2.3.3

ccqgithub commented Apr 4, 2018

遇到同样问题,2.3.3

@zuoez02

This comment has been minimized.

Show comment
Hide comment
@zuoez02

zuoez02 Apr 20, 2018

@furybean 这个问题仍然存在, 我在1.4上遇到了这个问题, 在jsfiddle上用2.3.5修改了一下你的demo, 仍然复现
http://jsfiddle.net/luto/1qz65xwg/
第三个页签中, 我手动修改了side的宽度和最小宽度变为0, 表格拉伸, 然后再改回来, side恢复了但是表格没有变窄, 下方出现滚动条
image

image
image
image

zuoez02 commented Apr 20, 2018

@furybean 这个问题仍然存在, 我在1.4上遇到了这个问题, 在jsfiddle上用2.3.5修改了一下你的demo, 仍然复现
http://jsfiddle.net/luto/1qz65xwg/
第三个页签中, 我手动修改了side的宽度和最小宽度变为0, 表格拉伸, 然后再改回来, side恢复了但是表格没有变窄, 下方出现滚动条
image

image
image
image

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