All tab contents showing at once

[Cricitem (webTAC | Technology Apprenticeship Center)]

Not sure what’s going on here or why.

http://rewe.webflow.io/
https://preview.webflow.com/preview/rewe?preview=6977df911250c65346d19d25e0b37a54

[cyberdave (Dave S.)]

Hi @Cricitem, thanks for getting in touch. The issue is that you have display flex instead of the default display set on the tab pane stylings:

Instead of setting display flex on the tab pane which needs to keep the default display position, remove the styling for display and postion on the tab and instead add a parent div block inside the tab pane, then put in the other content inside that div. Set the parent div to have the display flex instead of the tab pane:

https://cl.ly/1V1k0Y0g2M3x/Screen%20Recording%202017-08-15%20at%2005.42%20PM.mov

I hope this helps!

[Cricitem (webTAC | Technology Apprenticeship Center)]

Interesting. Thanks guy!

Why would setting the panes to flex layout break it, though? It feels like utilizing a workaround for a bug to add a 100% 100% container inside a tab pane to do what the tab pane should be able to do in the first place.

[cyberdave (Dave S.)]

Hi @Cricitem, the Tabs widget is a pre-styled widget that relies on the slides keeping their default styled state for Display and position.

It is usually good practice to go with default display and position on individual slides in the slider and tab panes in the tabs widget, and create a “wrapper” div nested inside the slide or tab to act as a main content container in the slider or tabs widget.

Changing the display/position styling of the tab panes can break the default widget behavior.

I hope this helps!