Hi
After changing from the Deprecated navigation tabs to the new one, the height of all the tabs seems to "get" the height of the heigest tab content. For example, in tab 3 we have a long list, see picture. Below the tabs content blocks, we have a container with some summary information. In tab 1 and 2, which has some short content in their tabs content, the summary field (which is in a container below the tab contenct block), is far below the end of the tab content. Seems to be as far below as the content in tab number 3.
This picture shows the issue after changing from the deprecated tabs to the new ones:
the content in tab number 3 is a long list.
The old deprecated tab and content tabs gives this in tab 1 with the same data, see picture. This is our wanted behaviour:
Any idea how to avoid that the space between the visible tabs content and content below the tabs is longer than the content of the visible tab?
Regards Bård
@Bård Indredavik, you can use the following CSS to 'fix' this behavior:
.osui-tabs__content-item:not(.osui-tabs--is-active) { display: none}
@Gonçalo Martins, is it possible that you add a boolean input to the new tabs "Adjust height" that when enabled adjusts the height of the tab when switched and when disabled it keeps the height of the longest tab?
Hi @Remco Dekkinga
We'll add this to our backlog and check with our DX/UX/UI teams.
I would like to understand the specific use case for that so that we can have a better understanding of this need
Specific use case is that the tabs are used to show some details in different tabs, where tab 2, 3 or n is showing more details than the first tab AND you have some generic info in a container below the tabs. In this case you always need to scroll a big whitespace to see your data.
Great! Thanks a lot @Remco Dekkinga!
This helped us!
I also thought it was a bug.
Yes! Many thanks from me as well, Remco. Seemed a bug to me as well.
I think the boolean input would be a great addition; this seems like very counterintuitive behaviour unless the tab content just happens to have similar lengths.
Hi all,
Since OutSystems UI 2.13.0, the Tabs have a new boolean option - ContentAutoHeight - on the OptionalConfig structure:
Best regards,
Bernardo Cardoso
That's awesome. Thanks for letting us know!
Hi Bernardo Cardoso This Optional Configs Content Auto height is not working properly for me some places its working fine some places its not working properly
Thank you @Bernardo Cardoso! Your post solved my issue.
In what situation do you want to use the AutoContentHeight on False? I don't see the benefit of it.
Hi @Bård Indredavik
That's not an issue, but a decision taken together with our UX/UI team's feedback. One of the reasons is also to avoid flickerings on the page for the most usual use cases.
Cheers,GM
Hi @Bård Indredavik ,
an option you could explore to mimic the old tabs behaviour with the new one, is keeping track of the current tab with the OnTabChange event and put an if around each tab content to only add it to the DOM when the tab it is on, is active.
See attached oml.
@Gonçalo Martins : there will still be 'flickering' if the content of any of the unshown tabs is fed by an aggregate or data action.
Flickering is not the only reason as you can imagine, but for content fed by aggregates, there are a lot of techniques to avoid/mitigate that. Anyway, this was a conscious decision based on feedback gathered and on research.
There's not a component that will fit 100% of the use cases so we need to make sure we provide a good default and options for the most important/common use cases based on data, research and feedback.
Also, we're taking an incremental approach based on this kind of feedback so that we can understand the specific use case (if you could explain it would be great) in order to see if it makes sense to provide a way to extend the provided options.
ignore what I proposed, Remco's solution under here with CSS is the way to go
Maybe you could solve this by using webblocks and only getting the long list when tab 3 is selected... But then you would loose the pre-load functionality.
Hi, is there a way to fix this issue for mobile, but allowing user to scroll horizontally between tabs?
CSS code fixes height issue but disables horizontal scroll.
Is there a way to scroll horizontally and fix the height for each tab?
Thank you.