ElemeFE / ElemeFE/element-react

Overflow: hidden is always on in Collapse element

Open
#1,051 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
435
PR merge metrics
No merged PRs in 30d

Description

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

![image](https://user-images.githubusercontent.com/1077884/73184612-06abc980-411d-11ea-92cf-9624978e9952.png)

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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.