Hello all,
When i have a sticky element inside a tab with the new component it dont get sticky anymore due to 3 overflows. .osui-tabs__content-item .osui-tabs__content osui-tabs as you can read for example here @ https://www.terluinwebdesign.nl/en/css/position-sticky-not-working-try-overflow-clip-not-overflow-hidden/#:~:text=If%20you've%20ever%20tried,hidden%2C%20scroll%2C%20or%20auto
The only way the sticky element still works is with the old component tabs (DepracatedV2), so something was changed and messed up this. I have attached an OML for someone who wants to explore it
I have put a sandbox in my personal area to replicate this:
https://cescorcio.outsystemscloud.com/Sandbox/NewTab - NEW VERSION (Dont work)
https://cescorcio.outsystemscloud.com/Sandbox/OldTab - OLD VERSION (Work)
This behaviour was already mentioned on the following links:
https://www.outsystems.com/forums/discussion/81021/tab-control-breaks-sticky-elements/
Is there any solution in place? I have notice a class called sticky-observer but cannot work with it.
Hi Carlos,
The new Tabs don't support that use-case. The way they are built, using CSS Grid and CSS Snap for drag gestures, makes the usage of the overflow: hidden mandatory.
You can use the following CSS (not fully tested), but in general position: sticky is very sensitive, and in other contexts might not work again (attached oml at the end, with solution).
Best regards,
Bernardo Cardoso
Thanks for the reply, but the OML don't fix the issue at all since there is way more divs with overflow hidden in place.
The solution might need be use a JS library like stickyfill but do need to try when i have more time in hands.
hi @Carlos Escórcio , have you managed to get any solution to this problem or is there any workaround for this apart from using the deprecated v2 tabs? I'm having the same issue.
Kind regards,
Aima Aimaduddin
Today I bumped to the same problem. The sticky button css lines don't work in combination with the navigation in OS11. Luckily Outsystems UI has a widget called FloatingContent which works like a charm in my situation. Hope this solves your problem too or maybe this helps if someone else have the same problem.
With kind regards,
Kit