Skip to Content (Press Enter)
UserImage.jpg
Aaron Blaquiere
78Views
3Comments
Tab control breaks sticky elements
Question
Reactive
OutSystems UI
Web
Application Type
Reactive
Service Studio Version
11.53.13 (Build 61176)

Hi,

I recently upgraded the tab control from DEPRECATED_TabsV2 to the latest version. On doing so, it appears any elements that were in the tab content item that used the css "position: sticky; Top: 0px" no longer work. 

Looking into it, it seems the new tab controls make extensive use of the CSS "overflow:hidden" which is known to break elements with the sticky attribute. 

Has anyone else encountered this or solved for it??


Thanks!

0
0
25 Aug 2022
Copy Link
2021-01-27 15-37-38
Tim Bates

I have the same or similar problem. I was using 

.sticky-tabs .tabs-header {    
position: sticky;    
top: 0px;    
background-color: white;    
z-index: 1; }

I've changed "tabs-header" to the new class and then tried many other options but no luck. Any help appreciated!

0
0
15 Sep 2022
Copy Link
2018-08-03 14-17-33
Carlos Escórcio

I have manage to make it work with Depracated TabsV2 Widget. The new version of the tabs don't allow sticky for the moment. I have open a ticket in https://www.outsystems.com/forums/discussion/85665/outsystems-ui-sticky-dont-work-with-new-tabs/

1
0
09 Feb 2023
Copy Link
2018-08-03 14-17-33
Carlos Escórcio

Hello, the solution there i have for the moment is a javascript to change between a position fixed, top 0 and position relative.

0
0
28 Jun 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.