Responsive tabs (tabs on desktop, accordion on mobile)

[not-authorized]

Hi All, I'm new in React and I need your help. I'm trying to build a responsive tab component and am almost done except for one thing. When the page loads on the small screen the first accordion panel is required to be expanded. I'm doing that by setting maxHeight to the element's scrolHeight, however, scrollHeight is always 0 at the first load. Please advise how to keep it open by default.

[Zertz]

Hey! I'm not sure I understand the issue, can you add some screenshots and ideally a live example?

[not-authorized]

Please use the following StackBlitz demo for reference.
Tabs Panel Demo

[Zertz]

That's super helpful! This is definitely a problem in the height logic rather than the library but I'll try to take a look shortly.

[not-authorized]

I've put a breakpoint at line 38 and noticed that scrollHeight is set to 38px on the first load. It looks like at that point the panel wasn't rendered completely and perhaps that's the reason why the height is inaccurate. Also, at that point innerHTML of the panel is empty. I'm wondering how JS evaluates the height of empty <div>

UPD: Just figured out where 38px is sourced from. That panel has a padding of 1em, top + bottom is 2em which is exactly 38px.

[Zertz]

I'm not sure exactly what the right solution is but wrapping your expand code in setTimeout works so it has to do with the content not being rendered yet:

[not-authorized]

Thanks for your help and for the Tabs control! 🙂