I'm using the Tabs element, but it isn't responsive!

Support
#1

Hi, I’m using the Tabs element, and I can’t see anywhere in the settings as to how I can change it so it’s responsive! I’ve got 5 tabs and at the minute, there’s a scroll bar showing on the page because the titles on the tabs won’t split onto 2 or 3 lines. I’ve tried to change the max width but nothing happens.

Here’s a screen grab for your reference:

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

#2

Hello @core365,

Thanks for writing in!

By default, the tab element is using flex option. To have the tab items fallback to the second rows when you do not have enough space for the items, please edit your page, click the Tab element and find the “Customize” tab so you can insert this element css:

$el.x-tabs .x-tabs-list ul,
$el.x-tabs .x-tabs-list ul li{
    display: inline-block;
}

Hope this helps.

#3

Hi, I’ve done that, thanks, however it creates multiple rows of tabs instead of keeping the 5 tabs on 1 row and splitting the title text onto multiple lines - this is how the Classic Tabs version used to work as far as I remember. Is there an option of doing it that way?

Thanks!

#4

Hey @core365,

Try replacing the code provided previously with this. It still and Element CSS

$el .x-tabs-list button {
    white-space: normal;
}

That works on my end.

Hope that helps.

#5

Hi @christian_y,

That worked perfectly, thank you!

However, when I view it on a mobile, it isn’t responsive. The scroll bar appears. Is it possible for the tabs to go on separate rows when viewing it on a mobile?

Thanks!

#6

Hello @core365,

You can update your code and use this:

 $el .x-tabs-list button {
    white-space: normal;
}

@media(max-width: 979px){
  $el.x-tabs .x-tabs-list ul,
  $el.x-tabs .x-tabs-list ul li{
    display: inline-block;
  }
}

We would love to know if this has worked for you. Thank you.

#7

Hi @RueNel,

That’s great, thanks! Just one more thing though if that’s ok! Can the tab fill the width of the screen and be centred, as at the minute they don’t stretch to fit.

Thanks!

#8

Hey @core365,

Please check the arrows in the screenshot below.

Do you want the tabs to stretch? If so, make sure the the Row’s Container is off and side paddings are 0.

Hope that helps.

#9

Hi, sorry, I meant they don’t stretch to fit the width of the screen when viewed on a mobile, they all appear to be staggered.

Thanks!

#10

Hey @core365,

Update the previous code to this:

 $el .x-tabs-list button {
    white-space: normal;
    width: 100%;
}

@media(max-width: 979px){
  $el.x-tabs .x-tabs-list ul,
  $el.x-tabs .x-tabs-list ul li{
    display: inline-block;
    width: 100%;
  }
}

Hope that helps.

#11

Spot on! Thank you so much! I appreciate all your time and help on this!

#12

You’re welcome!
We’re glad @Christian were able to help you out.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.