[Justin gParticipant]

Hello, I see this question has been asked a few times, and I have tried them. But with no success.
I have 4 tabs, each with a Flexslider shortcode inside them… when it loads the first one fine, but it doesn’t load the others. I can see the problem, but I am not entirely sure the solution to it.

Here is a sample if you scroll down.
[ Sent in private ]

[Justin gParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Flexslider has a dynamic height so it will depend on it’s container’s height. And the inactive Tab doesn’t have any height as it’s hidden. So it’s really a complex situation for the slider to calculate height within an inactive tab and display correctly. In that case you can try setting a min-height for the slider/slides. But this kind of setup might not work as expected.

Thanks

[Justin gParticipant]

Hmmm, yeah I did try a min-height on that, had some bizzar behaviour. Any other toughts on this?

[ZeshanMember]

Hi Justin,

Thanks for writing back!

Please try inserting this CSS code under Custom > CSS in the Customizer:

.x-tab-content>.x-tab-pane:not(.active) {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
    display: block;
}

Hope this helps. 🙂

Thank you!

[Justin gParticipant]

Hey, So far so good, apprciate the code… thanks.

[Nabeel AModerator]

Glad we could help.

Cheers!

[Author]

Posts