react-collapse: Wrong height calculated in nested components

Hello. I found a strange behavior with react collapse when you dont wrap the content inside a div with padding > 0.

The problem appears inside my sidebar menu.

I took the Nested.js from the examples and modified it. So it should be easy to reproduce it.

This code works:

        <Collapse
          style={style.container}
          isOpened={isOpened}
          keepCollapsedContent={keepContent}>
            <div style={{padding: 1}}>
              <ul>
                <li>Hallo
                  <ul>
                    <li>
                      <VariableHeight />
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
        </Collapse>

This one calculates the height wrong and jumps the the right size after animation is finished.

        <Collapse
          style={style.container}
          isOpened={isOpened}
          keepCollapsedContent={keepContent}>            
              <ul>
                <li>Hallo
                  <ul>
                    <li>
                      <VariableHeight />
                    </li>
                  </ul>
                </li>
              </ul>            
        </Collapse>

Here’s how it looks. react_collapse_jumping

Thank you in advance. 😃

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 22 (13 by maintainers)

Most upvoted comments

oh jeez that was hell of a holiday I reckon… Thanks for ping @davidspiess

nkbt on Jul 7, 2016

Yeah I found issues with nested collapse too recently. Can be solved by specifying if collapse has nested collapse elements (and then change internal state transition logic), since it is tricky to catch that automatically. It is not implemented yet, I will be able to get back to it bit later.

PS: we are using collapse quite extensively in our work projects, so this issue will be eventually solved 😃

Thanks a lot for a Codepen, I will add it to examples when I have some time. Feel free to add this example as PR if you are keen On Sun, 21 Aug 2016 at 13:47, Sassan Haradji notifications@github.com wrote:

@nkbt https://github.com/nkbt thanks for this great module, I found the nested behavior is not still buggy if you use more than one <Collapse> tag in a single render. It works alright if you use only one <Collapse> per component and nest them but if you use more than one <Collapse> in a single component it’ll behave strange. Look at this: https://codepen.io/sassanh/pen/GqLZVy?editors=0010

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/nkbt/react-collapse/issues/34#issuecomment-241237343, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKsoAlx_QKwHOhIGATVKkPQdjC99t34ks5qh8pogaJpZM4HUNTX .

nkbt on Aug 21, 2016

Just published react-collapse@next (not latest channel yet until better tested) with full rewrite, which fixes this issue. Give it a shot if you are keen.

nkbt on Aug 13, 2016

I do and I will when I am back from holidays 😃

No worries. On Tue, 22 Mar 2016 at 23:46, Benjamin Dreux notifications@github.com wrote:

Weird since this was merged on 29 of january an the is only on gh release which was made on the 30. But the release does not mention it.

Anyway, @nkbt https://github.com/nkbt do you have time to work on this ?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/nkbt/react-collapse/issues/34#issuecomment-199898624

nkbt on Mar 23, 2016