Horizontal Tab Scroll Bar

2
Hello,   if i use the tabs container and if i have lots of tabs, how can i add a horizontal scroll bar, so that i can scroll trough the tabs? It would be especially usefull for Phones, if the tabs can be just scrolled with the finger, instead of showing all of them in a lot of rows.   I am using Mendix Pro Version 9.23  
asked
1 answers
0

Hi Stefan,

The key to horizontal scrolling is that the container must have a set width or the scrolling option will be ignored. Using the default Mendix “tab container” widget, here is one way to implement scrolling. Put this “horizontal-scroll-example” class on the tab container widget. (Class must be defined in a sass file)

 

.horizontal-scroll-example{
    >ul.mx-tabcontainer-tabs{
        height: 50px;
        width: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        >li>a{
            padding: 5px;
        }
    }
}

You can play with the height, width, and padding parameters to get your desired look.

Here’s a resource with more information: https://blog.hubspot.com/website/horizontal-scrolling

 

Hope this helps!

answered