I am trying to create a tabs block using a list but the tabs do not line up.
It looks as though the last tab is wrapped on to the next line and the underline is in the wrong place.
I've created an example app to show this and uploaded the oml file.
The screenshot shows that tab one is selected but the underline is off to the right and tab three is wrapped around onto the next line.
I checked the versions of the modules and I think I am using the latest versions of the tab widgets (deselected any deprecated items)
Am I using the list wrong? Not sure how to proceed.
Any help appreciated.
Hi @Errol Chevannes,
When using UI Patterns with lists is often required to disable the virtualization, as it can bring UI issues. This is the case for the new Tabs Pattern.
By adding disable-virtualization=true on both lists, the Tabs work as expected:
Attached is your oml with the fix already!
Let us know if it works for you.
Best regards,
Bernardo Cardoso
Hi @Bernardo Cardoso
Thanks for the reply and the solution. I wasn't aware of that flag.
Do you have any more info regarding it or where I can find some?
I searched the documentation for it but nothing came up (apart from posts).
Is it a list thing or a general thing?
Found it.
For anyone looking here is the link:
List virtualization
Hi @Errol Chevannes ,
there are some problems with the new version of the tab widget, yours is probably one of them, so my guess would be this is a bug, not something you should do differently.
See also this post where there was also a problem with the blue underline not being in the right position. Maybe the temporary workaround proposed there could also work for you, worth a try.
Dorine
Hi @Dorine Boudry
Thanks for the quick reply.
I'll try and workaround it.
Maybe just revert to the deprecated versions for now?
EDIT: If I wrap the TabsHeaderItem and TabsContentItem in a Container they appear on the same line so that looks like it has fixed that issue.
The underline is still in the wrong place though but the post you mention might be able to help.
Thanks.
yes definitely,
the problem i found for that other post was only there in the new version, not the deprecated one, so if you don't have any company policies against it or something, that's the quickest solution for you.
Think I spoke too soon about fixing the issue of lining tabs up by using a container.
There still seems to be an extra gap/space underneath which means the separator line is not in the right place now.
I'll try the deprecated version instead.
oh and one more tip,
maybe post this type of post in the support section of the outsystems ui component, to get more attention from the makers
Reverted to using the deprecated versions.
Thanks for the help.
Yes, that's the link!
This is a general thing related with all OutSystems UI Patterns, when working with Lists. As the List widget, with virtualization, adds 2 script tags on the HTML, it can bring UI issues as the one on this post.