Hello everyone,


I noticed the Tabs widget in Outsystems11 is not placing the left overlay on the tabs header. The right overlay works fine, and i am even able to put on some code there, but the left overlay never works. I reviewed the JS code from the Outsystems action and it seems okay. Has anyone noticed this issue?


Link for the screen:

https://joao-grou.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/JTMobile/Screen1?_ts=636978524888136341

Solution

Hi,

The overlay is added according to the reading order that you use. So for a "regular" reading order of left-to-right, the overlay is added to the right side of the tabs. However, if you wrap your tabs in a container and give it the "is-rtl" CSS class, which specifies that the element has a right-to-left reading order, then the overlay will be added to the left side.


Solution

Thank you for you answer! 


So basically, the left overlay only happens by default in LTR apps? When i first looked into it i thought it would make a right overlay as well as left overlay, whenever the titles are offscreen. 

Anyway, if i add that class, it will only make it work on the left side, and i want it to work on both sides whenever the tabs header is off screen. Does anyone has any idea on how to achieve that?

You're going to have to clone the OutsystemsUI module and customize the Tabs pattern. I'd start by adding a new container with the "tabs-overlay" class right below the current one:

You'll also have to tweak the javascript code that adds the "left" and "right" CSS classes to the containers in the block's "AddOverlay" and "OnReady" client actions.

Thank you again, i was really trying to avoid cloning the pattern, i'm gonna try to get it to work some other way.

Probably ill just add JS to add overlay.left (or a new class that mimics the overlay) every time overlay.right is triggered.


Thank you very much for your replies, it helped me a lot.