174
Views
2
Comments
Solved
Reactive Tab Navigation - Header Items disappear
Question

Good morning, I'm working on a page that will use tab navigation to route users to different content sections.   One of the sections is a rather large table that contains a horizontal scroll.   What I'm seeing is when I select that tab the content is displayed as expected, but the vertical navigation tabs disappear and there is no way to navigate to another section.

If I place my table/scroll in a DIV and set the width in pixels it will render without losing my navigation tabs, but I don't love this solution because not all end users are set to the same resolution.

Has anyone else experienced this, and if so do you have a work around?

TabNavigation.oml
UserImage.jpg
Dylan Heunis
Solution

Hi Josh,


It took me a while to figure it out but I think I found the offending element.
I believe it is the 'white-space: nowrap' in the.table style definition.

Look what I did here to fix the issue by applying an overriding style on the screen itself that is added to the styles of the Table widget.

UserImage.jpg
Josh Herron

This works, thanks!   I assume this is not the intended implementation of the tab navigation but this CSS work around handles it.

 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.