Hey,
After upgrading to the new OutsystemsUI tabs we set up a page to use them:
(Fairly standard layout here as you can see)
The blue marker line is askew to the items?
If you click back and forth, it fixes itself (clicking to Surveys and back to Feature Toggles):
Can anyone else reproduce this issue? It seems to be fairly consistent in my environment?
I can see the --tabs-indicator-transform and --tabs-indicator-scale are first set to weird values before they straighten themselves out: (bottom div tag here):
Update: I have client variables remembering which tab was last used so the indicator has to jump early in the rendering process to the right position.
Hi @Soren Staun,
Not exactly sure what is the issue on your app, but using above sample (thank you for this @Dorine Boudry), I was able to get it working.
The issue of the indicator size is due to the Tabs indicator only being updated on window resize or every time a new tabs item is removed or added. In this scenario, only the size of the item changed, so the variables weren't being updated.
We will be looking into this use-case, to check if it makes sense to add something by default. In the meantime, our JavaScript API can be used as an workaround, by calling the _handleTabIndicator() method on the input OnChange (in your case, you might need to run it on the screen's OnReady instead):
I attached the oml with this solution. Let me know if it helped!
Best regards,
Bernardo Cardoso
Hi Soren,
I'm able to reproduce incorrect display of the tab indicator blue line. I would say this is a bug in the new version of tabs widget in Outsystems 2.10.0.
See attached demo, when you dynamically change the header of tab 2, the blue line gets redrawn correctly on the deprecated tab widget, but not on the new one.
Dorine
Thanks guys, much appreciated. We only have the issue where a tab up the line is selected by client variable (session remembered tab), not ever if it's the first tab.
In my case the wrong size of the active tab indicator comes from screen scaling factor. Fonts are properly resized but indicator stays as if it was 100%.If you look on a second screen with 100% factor, everything looks fine.
Yes,
That's another problem with the new tabs widget.
See also this post