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

[Bug Report] table height ignores CSS variable expression #15829

Closed
ScorpioX opened this issue May 31, 2019 · 6 comments
Closed

[Bug Report] table height ignores CSS variable expression #15829

ScorpioX opened this issue May 31, 2019 · 6 comments

Comments

@ScorpioX
Copy link

Element UI version

2.9.1

OS/Browsers version

Mac Chrome v74

Vue version

2.6.10

Reproduction Link

https://codepen.io/anon/pen/PvxdaX

Steps to reproduce

  • 在2.8版本中表格高度写成【height="calc(90vh - 280px)"】可以正常显示 滚动
  • 升级到2.9之后表格高度变成自动,console显示 [Element Warn][ElTable]invalid height and it will be ignored.
  • 改写成【style="height:calc(90vh - 280px);overflow-y:auto"】就又正常了,但滚动时表头也跟着滚跑了

What is Expected?

Table文档描述:如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值。
calc(90vh - 280px)属于合法的CSS计算表达式,应该被当成string设置成style.height

What is actually happening?

string类型的height貌似引入了合法性检查,导致CSS计算表达式被忽略。强制把height改成style,还需要处理滚动问题

@element-bot element-bot changed the title [Bug Report] table height忽略了CSS变量计算表达式 [Bug Report] table height ignores CSS variable expression May 31, 2019
@element-bot
Copy link
Member

Translation of this issue:

Element UI version

2.9.1

OS/Browsers version

Mac Chrome V74

Vue version

2.6.10

Reproduction Link

Https://codepen.io/anon/pen/PvxdaX

Steps to reproduce

  • In version 2.8, the height of the table is written as [height = "calc (90vh - 280px)], which can display scrolling normally.

  • Upgraded to 2.9, the table height becomes automatic, and console displays [Element Warn] [ElTable] invalid height and it will be ignored.

  • Style = height: calc (90vh - 280px); overflow - y: auto) is normal again, but the head of the watch rolls away as it rolls.

What is Expected?

Table document description: If the height is of string type, the height is set to the value of style. height of Table.

Cal (90vh - 280px) is a valid CSS expression and should be set to style. height as string.

What is actually happening?

String type height seems to introduce legitimacy checking, which leads to the neglect of CSS computational expressions. Forcing the height to style also requires scrolling.

@seymoe
Copy link

seymoe commented Jun 3, 2019

+1

@ScorpioX
Copy link
Author

ScorpioX commented Jun 4, 2019

Just found a similar issue,【height="100%"】 is rendered as 【style="height:100px"】, please fix ASAP since this bug has caused dozens of issues in my application.

@mohankonyala
Copy link

+1

1 similar comment
@recursion123
Copy link

+1

@ziyoung
Copy link
Contributor

ziyoung commented Jun 12, 2019

Duplicate of #15806

@ziyoung ziyoung marked this as a duplicate of #15806 Jun 12, 2019
@ziyoung ziyoung closed this as completed Jun 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants