Fixed Position Tabs (Lock tabs on top of screen on scroll)

Hi,

My requirement consists of using tabs to show some tables, and these tables might get very long so I need the Tabs themselves to be position locked

So when a user selects a particular Tab and scrolls through the content for that Tab, All the tab headings must be locked on to the view(screen) and must be visible at the top of the screen even as the user keeps scrolling down so that a Tab can be changed from where the user currently is without having to scroll all the way back up again.

The problem is that Tabs do not allow styling and I have tried attaching " .Tabs_header{ position:fixed;} " But it does not work.

I also tried to attach css to tabs by cloning the tab widget and trying to modify it over there, but same issue.

Enclosing tabs in a container and styling the container is not going to work too..

Any help regarding this issue will be appreciated,

Thanks

Hey Anurag,

Are you using SilkUI, OutSystems 10's "Web Application" template, or OutSystems 11's "OutSystems UI"?

Craig St. Jean wrote:

Right now, the development environment I am working on is on outsystems 10, and will not move on to 11 in the near future

Hey Anurag,

Can you please tell me if you are using a SilkUI based template, or if you are instead using the Web Application template (London theme)?

Hi Craig, we are using the silkui Lisbon template

Hi Anurag,

I'm using the same with javascript. And its working for me.
Here is the code:

var reactContainer = document.getElementById('reactContainer');
var tabsContent = document.getElementsByClassName('tabs-content-tab');
if(tabsContent.length > 0){
     for(var i=0; i<tabsContent.length; i++){
        tabsContent[i].style.height=(reactContainer.offsetHeight-126)+"px";
    }
}

Please let me know if its work for you.
Thanks