search

mdbootstrap / mdb-react-ui-kit

React 18 & Bootstrap 5 & Material Design 2.0 UI KIT
https://mdbootstrap.com/docs/b5/react/
Other
1.41k stars 264 forks source link

MDBCollapse keep height after animation ends #175

Closed JasperHorn closed 1 year ago

JasperHorn commented 1 year ago

In plain mdb, the height of the component is removed after the animation has ended. In react-mdb, the height of the component remains after the animation.

The mdb-react approach means that if you change the content of the collapsible element, it may overflow or not shrink to fit the content. Additionally, the documentation shows the react code on top of a sample that is (apparently) not running the react code, so differences in behavior have a very misleading representation in the documentation...

See these examples:

No react: https://stackblitz.com/edit/github-ceeupc-jos1xg?file=index.html React: https://stackblitz.com/edit/github-ceeupc-xnziba?file=src%2FApp.tsx

In both examples, open the collapsible comment and then click the "add content" button to double the content of the collapsible item. The red div is added so you can see where the other div is overflowing.

gbujanski commented 1 year ago

Thanks for reporting. We will fix it as soon as possible.

mako3577 commented 1 year ago

Fixed in 6.2.0.