Log in to AnswerLog in to Follow
2018-10-02 08-27-21
Remo Linter
43Views
5Comments
Solved
[OutSystems UI] AccordionItem collapse and expand only works with Text in Title
Question
UI
Reactive
OutSystems UI Patterns
OutSystems Widgets
Usability
outsystems-ui
Reactive icon
OutSystems UI
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.


0
0
05 May
2022-01-13 11-39-41
Bernardo Cardoso
Staff
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 

 

See solution in context
1
0
05 May

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

0
0
05 May

Hi Mita

Thank you for trying out.

But in the example you are using DEPRECATED_Accordion and DEPRECATED_AccordionItem.

Greetings

Remo

0
0
05 May

Replying to Remo Linter's comment on 05 May 2022 08:15:55

Hi Remo,

this is what available in the latest version.

0
0
05 May

Replying to Mita's comment on 05 May 2022 08:34:09

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

1
0
05 May
2022-01-13 11-39-41
Bernardo Cardoso
Staff
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 

 

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