Tabs on a Parent Screen changing Tabs in a child Web Block

While developing a Reactive Web App I came across an issue with the Tabs. 

I have a parent screen with vertical tabs, and in one of the tabs we have a web block with horizontal tabs.

However, when I publish the application both sets of tabs are now vertical…

In the editor, the web block has horizontal tabs defined:

Regardless of what I do… it will inherit the parent screen’s isVertical tab parameter. 

All of the tabs work as they should and show the correct information when selected. It is just the tabs that are visually incorrect. 

Is this a bug?

Hi Cindy,

I agree it's a bug.  The cause is in the CSS of OutsystemsUI.  The Outsystems CSS for this Tabs component is not considering that you might want to nest them, i guess.  

It has a lot of specific selectors for tabs-vertical class, setting for example it's flex-direction to column, but it is not having the same selector for the tabs-horizontal class to explicitly set it to row.  In case a horizontal is used on it's own, that works, because row is the default flex-direction or because a tabs class applies.

But when a tabs-horizontal class sits inside a tabs-vertical class, it uses the most specific selector, which is tabs-vertical over tabs.

So the solution is for Outsystems to fix their CSS.

I created a demo oml, providing a workaround as long as this bug is in there.  It's not nice, but it kind of works.  It explicitly sets an extra class of fix-horizontal-header in the ExtendedClass in the Navigation/Tabs component that you want horizontal inside a vertical.  I added some css, and it already looks a lot better when testing, but if you really want to do it this way, you'd have to take a look at all CSS involving tabs and see what other details to fix.

Good luck,

Dorine