Question

Change browsing tabs

22:32 Nov 07, 2018

Hi community!

I need that instead of navigating the tabs by means of the arrow ->, they are shown in a list below, to be able to see them all together without having to navigate. That is, they are displayed in various rows depending on the amount that exists.

Any idea?

King Regards,

Ezequiel

2 comments

Ryan Farley

23:21 Nov 07, 2018

Hello Ezequiel,

You'll need to add the following CSS:

.ts-tabpanel {
    height: auto;
}
 
.ts-tabpanel-items {
    overflow: visible;
    white-space: normal;
    margin: 0 !important;
}
 
.ts-tabpanel-scroll-left {
    display: none;
}
 
.ts-tabpanel-scroll-right {
    display: none;
}

This will change the tabs to wrap onto new rows if needed. If the display is wide enough it will look like this:

If not, they will wrap like this:

Hope this helps.

Ryan

Matt Watts

01:24 Nov 08, 2018

Ryan Farley,

Thank you for a very thorough explanation!

Best regards,

Matt

Show all comments