ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.83k stars 444 forks source link

Overflow: hidden is always on in Collapse element #1051

Open Jded opened 4 years ago

Jded commented 4 years ago

When you eg. try to put a select inside a Collapse, this happens:

image

There are two divs in Collapse that have overflow: hidden set . When you override them via css, everything seems to be working correctly except for collapse/opening animation. The main problem is with the outside div, which is the main element of this component: https://github.com/ElemeFE/element-react/blob/master/libs/collapse/index.jsx

It seems that originally it had overflow: hidden set as a part of collapsing/ hiding animation, see : https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L94

https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L72

and unset after the animation is complete:

https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L113

https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L81

Unfortunately, later overflow: hidden was hardcoded for whole element, see:

https://github.com/ElemeFE/element-react/blob/09688fe5cc5fd837815f860e6f83cdf1dd7ef12a/libs/collapse/index.jsx#L122

WIthout this hardcoding, overiding the other overflow: hidden (set as part of el-collapse-item__wrap) would remove the issue with select dropdown being cut off, because the outside div would only remove overflow during animation (which produces desired animation effect).

Could line 122 be removed?