Accordeon - wrong content height when changing viewports

[branislav-remen]

When you open Accordeon and then change size of window, then some content is missing because height of content didn't change. Also height is calculated too soon - our styles are probably not considered because it will cut out some content. (see screenshots in slack channel or let me know and I'll show you. I can't add them here from security reasons)

Expected Behavior

Content should be still visible when user change window size.

Current Behavior

Content is cut when changing from bigger viewport to smaller.

Steps to Reproduce

1. Go to your storyboook: https://patterns.axa.ch/?path=/story/components-accordeon--accordeon

2. Open any accordeon.

3. Change viewport to XS

4. Some content is missing now:

5. Close and open Accordeon again and it appears.

Context (Environment)

Use implemented your component at myaxa and now lot of content is missing sometimes. Interesting is that on "tablet" viewport is from page init (I don't have to change viewport). I guess there is another issue and content height is calculated before content renders.

Possible Solution

• recalculate content height when viewport changes ( maybe event listnener on resize event? I didn't use it yet )
• wait with calculation of content so it's fully loaded. it's possible that accordeonContent.scrollHeight is evaluated before content is fully rendered/our styles are applied.

[branislav-remen]

Possible solution:

As I mentioned above, you can probably add event listnener to fix half of the issues mentioned above. I am not familiar with lit but if you add this snippet to /accordeon/index.js, then it should work.

  constructor() {
    super();
    applyDefaults(this);
    this.toggleAnimation.bind(this);
  }

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('resize', this.toggleAnimation);
  }

[branislav-remen]

Something to read: https://dev.to/vadimfilimonov/accordion-in-vanilla-javascript-2a85