alexpeverett
commented
3 months ago We temporarily fixed this by running the following function when we add a new item to the accordion.
export function fixAccordionStyle(id) {
document
.getElementById(id)
.shadowRoot.querySelector(
".cds--accordion__wrapper",
).style.webkitMaxLogicalHeight = "fit-content";
}
The problem
The accordion-item does not automatically scale when elements are added if the accordion item is opened from a closed state. When the accordion is assigned an open attribute, the accordion-item scales correctly but if closed and re-opened, the bug persists.
https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/43755376/2412bbd9-a81a-4fc6-8140-03872e777fdb
The following video is when the accordion-item has an 'open' attribute assigned to it.
https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/43755376/c0bd4e16-4719-45d9-a37c-7beb4745eb2f
The solution
I have no idea what the solution is but the accordion-item should be able to scale up in size whether the open attribute is declared or not.
After doing some digging it appears that a div with the class name "cds--accordionwrapper" applies a fixed size to the accordion item (max-block-size). However, when the open attribute is used, max-block-size is set to 'fit-content'. There is no part attribute that I can use to access the "cds--accordionwrapper" div in the shadow root so I cannot (with my current knowledge) change the max-block-size CSS.
Application/website
St4sd registry UI
Business priority
Very high Priority
What time frame would this ideally be needed by (if applicable)
Very high priority.
Examples
Examples are above.
Code of Conduct