When using the accordion component, there is a problem with hiding and showing content. The method used to toggle the content's visibility changes the height property between 0 and the actual content size. However, this causes an issue when resizing the window. For example, on a desktop, the content height might be set to 200px, but when the window is resized, the content size may change based on the text. This can result in the content being partially hidden if the new content height exceeds the initially set height (e.g., the content height might become 240px, but the initial height was set to 200px).
Steps to Reproduce:
Use the accordion component and expand a section with content.
Resize the window (e.g., make it smaller).
Observe that the content may not fully display if the content height changes with the window size.
Expected Behavior:
The accordion component should dynamically adjust the height to fit the content size, even when the window is resized.
Actual Behavior:
The content height remains fixed, causing parts of the content to be hidden if the content size changes.
Suggested Solution:
Instead of setting a fixed height for the accordion content, use CSS properties such as max-height with a transition, and set it to a large value that can accommodate dynamic content changes.
Description:
When using the accordion component, there is a problem with hiding and showing content. The method used to toggle the content's visibility changes the height property between
0and the actual content size. However, this causes an issue when resizing the window. For example, on a desktop, the content height might be set to 200px, but when the window is resized, the content size may change based on the text. This can result in the content being partially hidden if the new content height exceeds the initially set height (e.g., the content height might become 240px, but the initial height was set to 200px).Steps to Reproduce:
Expected Behavior:
The accordion component should dynamically adjust the height to fit the content size, even when the window is resized.
Actual Behavior:
The content height remains fixed, causing parts of the content to be hidden if the content size changes.
Suggested Solution:
Instead of setting a fixed height for the accordion content, use CSS properties such as
max-heightwith a transition, and set it to a large value that can accommodate dynamic content changes.