Search the forum...
Type to search...
Other Tabs & Accordions questions
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:
J3 example:
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
Peter van Westen
ADMIN
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:
Peter van Westen
ADMIN
Peter van Westen
ADMIN
PS: I don't see that height change flash you mentioned.
Peter van Westen
ADMIN
Peter van Westen
ADMIN
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:
bwd
Hi Peter:
Thank you. That does work but it also breaks pages that have tabs with plots using plotalot:
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:
Peter van Westen
ADMIN
Peter van Westen
ADMIN
Due to specificity, the display:none will then overrule the display:flex in ready state.
So add:
For more info about how elements get their styling, you can use the Element Inspector of your browser.
Forum
Help with layout shift when loading
bwd
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
Peter van Westen
ADMIN
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
Peter van Westen
ADMIN
Please post a rating at the
Joomla! Extensions Directory
Peter van Westen
ADMIN
Peter van Westen
ADMIN
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
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
Peter van Westen
ADMIN
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
You can only post on the extension support forum if you have an active subscription and you
log in
Buy a Pro subscription
Buy a Pro subscription