20
Views
5
Comments
[OutSystems UI] accordion expanded inside tabs
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

I have tabs with the property ContentAutoHeight to true. When I expand for the first time the screen its broken like the picture, then if I touch in the screen comes to normal. Strange behaviour. I am in ODC

2019-11-11 17-10-24
Manish Jawla
 
MVP
AI Generated

Hi @Filipe Lourenço ,

This is likely a rendering issue caused by the accordion inside a tab when ContentAutoHeight = True.

You can try:

  • Removing any fixed heights on the tab container.

  • Forcing a refresh/redraw after the accordion expands so the tab recalculates its height.

  • Checking the accordion’s initial expanded settings.

  • As a workaround, setting ContentAutoHeight to False and handling scroll via CSS.

https://www.outsystems.com/forums/discussion/101380/how-to-make-container-expand-with-accordion-expansion/ 

regards,

Manish Jawla


This answer was AI-generated. Please read it carefully and use the forums for clarifications
2024-01-05 16-00-17
Filipe Lourenço

I dont have any fixed height in tabs. 

"

  • Forcing a refresh/redraw after the accordion expands so the tab recalculates its height.

"

How to do that?


2019-11-11 17-10-24
Manish Jawla
 
MVP

Hi @Filipe Lourenço ,

can you share the sample oml here for further investigation?

regards,

Manish Jawla

2024-01-05 16-00-17
Filipe Lourenço

unfortunately no

2026-03-20 01-28-51
Saugat Biswas

Hi @Filipe Lourenço ,

This is a known rendering issue in ODC when using Tabs with ContentAutoHeight = True, especially when the tab contains dynamic content (Accordion, Expandable Containers, lists, etc.). This is case of layout reflow timing bug.

Root Cause:

In ODC, the Tabs pattern: 

  • Calculates its height only once, when the tab becomes active 
  • With ContentAutoHeight = True, it assumes the content height is already final 
  • When an Accordion expands (or similar), the content height changes after that calculation 
  • The browser doesn’t immediately trigger a reflow 
  • A user interaction (tap / scroll / resize) forces a repaint, and everything snaps back to normal

This happens only the

This happens only the first time, because:

  • The first expand happens after initial layout
  • Subsequent interactions already have a valid layout tree
  • Touching the screen forces reflow + repaint

Solution: None documented.

Workaround:

  • Option 1: Force a layout recalculation after expand (recommended)
    • Trigger a custom reflow right after the accordion expands. JS workaround (safe & minimal):
      • Example: setTimeout(() => {  window.dispatchEvent(new Event("resize"));}, 0); 
    • This mimics the “touch” that fixes the layot. Works reliably in ODC.
  • Option 2: Force tab content redraw if you can reference the tab container:
    • const el = document.querySelector(".osui-tabs__content");
      el.style.display = "none";
      el.offsetHeight; // force reflow
      el.style.display = ""; 
    • This forces recalculation

Hope this helps.

Cheers,

Saugat

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