Streaming live at 10am (PST)

Help with tab styling


#1

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


#2

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 insidetab-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:


#3

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…


#4

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.


#5

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