[OutSystems UI] Accordion Item CSS issue v2.6.13
Forge component by OutSystems R&D
Application Type
Reactive

The Accordion item CSS specifies selectors with ":first-child" and ":last-child" pseudo-class:

/* ================================================================ */
/*  $4.2 - Patterns - Content                                       */
/* ================================================================ */

/* $4.2.1 - Patterns - Content - Accordion */

...

[data-block*="AccordionItem"]:first-child .section-expandable {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

[data-block*="AccordionItem"]:last-child .section-expandable {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

...

But the generated HTML is adding a <script> tag as first and last child, making these selectors never work, leaving the accordion looks like this:

Changing these selectors to "first-of-type"/"last-of-type" fixes the sympton:

[data-block*="AccordionItem"]:first-of-type .section-expandable {
    ...
}

[data-block*="AccordionItem"]:last-of-type .section-expandable {
    ...
}

But it would be great if the cause was also fixed.

Regards,

Leandro

Hi, @Leandro Oliveira ,

Thanks for your feedback and heads up! That script tag is added once the list virtualisation is not disabled, yet it's an issue that can and should be solved by default yes.

That said, we'll put it in our backlog to solve it asap.

Once again, thanks for your feedback.

Hi, @Leandro Oliveira

I'm happy to let you know that this fix will be on our next release.
Keep tuned and thank you for your feedback.

Cheers,
GM

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.