Help with tab styling

I’m using the “Tabs” component but whenever I change the content in one tab pane it changes the text in all my other tab panes.

I also can’t see any other tab panes even though I have 4…

Am I missing something, or did Webflow allow me to change a styling attribute that shouldn’t be changed for this component?

Please help!


Here is my public share link: https://preview.webflow.com/preview/newtrice?preview=04268a50fb1600b09447adb2997f26f6

You break the layout

First tab in many cases is a game of display: none;and display: block toggle by JS. HTML-JS-CSS basic example:
https://www.w3schoo ls.com/howto/howto_js_tabs.asp

In any js plugin you can not Change the core style/markup!! In your case you add style named: Tab Pane and change the core style " display: none;" (The plugin JS use this property) to "display: flex" Thats it :slight_smile: This is enough to break the layout (Now you dont toggle from hidden to block ).

If you want to add flex/grid inside tab-pan-X add div wrapper inside tab-pan than add any style you want

Solution

First - remove this class from the 4 tab panes. Than change the text (in all four tabs you have the same content).

Related tutorial:

This fixed the issue, but once again:

Webflow, why do you allow me to change something that should not be changed…

I can’t set column widths… why can I change tab display properties?

Come on…

I agree but sometimes you want to change other properties (bg color, and so on). You can add this issue to wishlist or idea like.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.