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
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.
Harish
Harish Yerra wrote:
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
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,
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; }