Sliders in Tabs

[RubberDuckers]

I’m on 6.3.1

I have a slider in a tab (will have multiple tabs, each with a slider per category of products).
The tab panel seems to ignore any width as the slider just bleeds out of it.

You can see it sitting nicely here with both arrows in.

Then when it’s not full width:

But it seems to resolve itself when I add:

.x-tabs-panels {
display: block;
}

But that seems to be an unneeded fix.

[ruenel]

Hello @RubberDuckers,

Thanks for writing in! You may need to set a width and maximum width in your Slider Container.

You can either use Global Container or set the width and maximum width to 100%.

Hope this helps.

[RubberDuckers]

Thanks @ruenel that didn’t do anything unforatuntely.
When I removed:
.productTabs .x-tabs-panels, .blogTabs .x-tabs-panels {
display: block;
}
that I added in to solve it, the issue still remains.

I’ve removed that from the product carousel (first you’ll see on the page) but left it on the blog one (towards the bottom) so you can see the difference:

Buy Pet Food Online | Burgess Pet Care

It seems to be the tab panels that ‘break out’ of their container?

[ruenel]

Hello @RubberDuckers,

We would love to investigate this issue further. Please provide us access to your site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[RubberDuckers]

Thanks - details attached. I’ve left the two sliders as they were so you can see.

[christian]

Hey @RubberDuckers,

Setting the Tab Panels to display block via custom CSS is the best solution for this case.

.productTabs .x-tabs-panels {
  display: block;
}

What we can do is list this as a feature request for the Tab Panels to have a display option.

[RubberDuckers]

Thanks for confirming - glad it wasn’t something I was overlooking in settings!

[ruenel]

You’re welcome.