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

Hi Viraj,

How and where to apply this javascript.

Thanks

Harish

Harish Yerra wrote:

Hi, 

You have a space when you can add this JS

Inside the "JavaScript". 

Cheers,

Thiago S. Mari

Hi Thiago,

In mobile applications for container there is no option called javascript.

Regards

Harish

Harish Yerra wrote:

Hi,

But you can OnRender(I think this is the option) you can create a action who will put the JS Action inside and then put your JS.

Thanks,

Thiago S. Mari

Hello Anurag,

One possibility is the other way around and set the main container inside the Tab with scroll, like this:

position: fixed;

height: 50%;

overflow-y: scroll;

Regards,

Ruben Rodrigues

Have you tried making it styled with :

"sticky-header"

Came here wanting to fix container at the top of a screen and found this to be a solution afer the suggestions here did not work. (OutsystemsUI 11)
The css reads:

.sticky-header {
    position: -webkit-sticky;
    position:         sticky;
    top: 0;
    z-index: 1;
}