Tabs Element Not Showing Scroll Bar

[comstarsupport]

The Cornerstone documentation seems to say that if too many tabs are added, they will scroll, but that is noit what happens. When I add a tab the rest get smaller and the new one is added on the right, with no scroll. I need to end up with 14 tabs, which are too small to read after 6 or 7. I can’t locate the Tab List Container described in the documentation:

“The tab list container has an overflow-x: auto; style applied to it, which will only display a scrollbar when the amount of tabs and their dimensions are larger than that of their container. They can then be horizontally scrolled through, which also effectively allows for an “infinite” amount of tabs as this pattern is completely responsive at all screen sizes no matter how much content you throw at it.”

[nabeel]

Hi @comstarsupport,

Thank you for reaching out to us. I tested the Tabs element in my local setup and it does show scrollbar when the tabs exceeds the container width (see screenshot)

You may have customization which might be preventing the scrollbar to appear, try removing CSS/JS CUSTOMIZATION and see if this resolves the issue.

If the issue persists then please get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

[prakash_s]

Hello @comstarsupport,

Thanks for sharing the login details. I checked your page it seems that there is a decent amount of the Tab content so it is not scrolling though I have created a test page called “Themeco Test” that is in a draft mode, you can check the Tab setting there and you can follow the setting to your layout. Please have a look at the screenshot in the secure note.

Thanks

[comstarsupport]

I’ve compared settings and I can’t find a difference between the pages. When I add more tabs I see this:

[tristup]

Hi @comstarsupport,

I have checked and found the problem you described, it only happens while you are adding the Image as the Label of the Tab. I suspect this could be a problem with the latest version theme and will report it to the developers for further investigation.

Thanks

[comstarsupport]

I was starting to suspect that the image was the problem. We will look forward to the resolution. Thank you.

[marc_a]

Hi @comstarsupport,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[comstarsupport]

I have developed a work-around. Since the width of each tab is determined by the number of text characters, I added this code under each image: “

1234567890

” (with a line-break before the p tag), so each tab will display at the same width and each image at a decent size. Then I went to “Individual Tabs”, where I made the bottom margin -53, which covers the text with the scroll bar. All looks good now, although not seeing scroll bar on phone, so have to intuit that you can slide the tabs.

Still, it would be nice if a tool to include images in the tabs were available.

Thanks!

[alexander]

Hi @comstarsupport,

Glad to see you got something working. I’m following up in regards to the bug report Tristup made. Regretfully the Tabs element wasn’t designed to support images like that, and we don’t plan on adding support to the current tabs element. We are however going to be working on a new “toggleable areas” feature that will allow the creation of custom tabbed interfaces using existing elements. That being said, the best way to achieve your desired effect at the moment is to use the current element and remedy it with some Custom CSS like you’re doing.

[comstarsupport]

Hi Alexander,

My work-around might help others, but the title of my post is not relevant to images in the tabs. Can it be reposted with a relevant title and the solution I came up with?

Thanks

[tristup]

Hi @comstarsupport,

Glad to know that you wanted to post it for others. I would suggest you create a new thread with a relevant title and post the solution to that.

Thanks