Help with layout shift when loading

bwd

Hi Peter:

This may not be a result of tabs & accordions but when I load a page with them inside a module they flash for a second and the module height changes. This doesn't seem to happen in the J3 version of the page:
J4 example:

Confidential information:

(hidden)

J3 example:

Confidential information:

(hidden)

This is the second card with tabs called Latest Buy & Sell. The settings are to switch to accordions at the default 576.

I could put the tabs in a div with a max-height but I don't really know the max-height.

Hopefully this makes sense,
Thanks
Dave

J4 4.3.2
Tabs&Accordions 1.3.1 Pro

Peter van Westen ADMIN

10 months 4 weeks ago

Peter van Westen ADMIN

10 months 4 weeks ago

Tabs & Accordions can only show the tabs as they will be after the CSS and Javascript is loaded and executed.
For this reason, the tabs are hidden (opacity 0) before fully rendered.
After it is finished, the tabs will fade in with a 1sec transition.

If you don't want that fade in effect (so it just shows when it is done, then you could override the CSS styling:

@media screen {
  [data-rlta-element=container] {
    transition: none;
  }

Please post a rating at the Joomla! Extensions Directory

Peter van Westen ADMIN

10 months 4 weeks ago

Peter van Westen ADMIN

10 months 4 weeks ago

PS: I don't see that height change flash you mentioned.

Please post a rating at the Joomla! Extensions Directory

Peter van Westen ADMIN

10 months 4 weeks ago

Peter van Westen ADMIN

10 months 4 weeks ago

I could see the height change you mentioned in another browser.

This is because Tabs & Accordions doesn't know the final height of the tabs before it is fully rendered. So it will take up more space in the prerendering.

If you want it to take up zero space, then you could try to do this in your CSS override instead:

@media screen {
  [data-rlta-element=container] {
    display: none;
    transition: none;
  }
}

Please post a rating at the Joomla! Extensions Directory

bwd

10 months 4 weeks ago

bwd

10 months 4 weeks ago

Hi Peter:

Thank you. That does work but it also breaks pages that have tabs with plots using plotalot:

Confidential information:

(hidden)

I know this is a css question, but is there any way to target a single container with an ID or class?

when I try this the display:none just hides the content:

@media screen {
  #mod-custom255 [data-rlta-element=container] {
    display: none;
    transition: none;
  }
}

Peter van Westen ADMIN

10 months 4 weeks ago

Peter van Westen ADMIN

10 months 4 weeks ago

Due to specificity, the display:none will then overrule the display:flex in ready state.
So add:

@media screen {
  #mod-custom255 [data-rlta-element=container][data-rlta-state=ready] {
        display: flex;
    }
}

For more info about how elements get their styling, you can use the Element Inspector of your browser.

Please post a rating at the Joomla! Extensions Directory

bwd

10 months 4 weeks ago

bwd

10 months 4 weeks ago

Perfect, thank you.

Tabs & Accordions

T&A Tabs & Accordions