[OutSystems UI] AccordionItem collapse and expand only works with Text in Title
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

In AccordionItem form OutSystemsUI Version 2.8.3 collapse and expand only works with Text in Title.

When using expression or container in Title the expand and collapse is not works at click on expression or container.


Solution

Hello @Remo Linter,

This behavior is by design on the new Accordion Pattern. 

The reason for this is to make sure that when using clickable elements inside the Accordion Title, like links, buttons, tooltips, etc., the accordion isn’t opened when clicking on them.


As for an workaround, the customer can add this CSS snippet to their theme to fix this (be aware that this CSS will prevent interactions with clickable elements inside the AccordionTitle):


.osui-accordion-item__title__placeholder > * { 

       pointer-events: none; 

}


Best regards,

Bernardo Cardoso 

 

Hi Remo,

I am able to do it with the latest version of Outsystems UI.

I have created one oml, you can refer that.

hope, it could help.

Mita

testUI.oml

Hi Mita

Thank you for trying out.

But in the example you are using DEPRECATED_Accordion and DEPRECATED_AccordionItem.

Greetings

Remo

Hi Remo,

this is what available in the latest version.

Hi Mita


Search... (Ctrl + F)

Search in other Modules

Search Text: Accordion

Search in: Block


Add Dependancy to Accordion and AccordionItem from Module OutSystemsUI.

That are the new Versions. Wish fun with trying out.


Greetings

Remo

Solution

Hello @Remo Linter,

This behavior is by design on the new Accordion Pattern. 

The reason for this is to make sure that when using clickable elements inside the Accordion Title, like links, buttons, tooltips, etc., the accordion isn’t opened when clicking on them.


As for an workaround, the customer can add this CSS snippet to their theme to fix this (be aware that this CSS will prevent interactions with clickable elements inside the AccordionTitle):


.osui-accordion-item__title__placeholder > * { 

       pointer-events: none; 

}


Best regards,

Bernardo Cardoso 

 

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