Horizontal Tab Scroll Bar

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  
1 answers

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)


        height: 50px;
        width: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
            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!