Tabs Widget Issue

Continuing the discussion from "Clean Up Styles" reports used classes as unused:

I am using a very basic structure of Section > Container > Content (divs, cols, etc.)

I’ve had no issues with any other elements so far. But, the Tabs widget is rendering strangely:

[IMAGE REDACTED - SEE FOLLOWUP BELOW]

It renders fine on an empty page. But it won’t render properly in my Section > Container or directly in the Body (both examples are in the above capture.)

My Body element has nothing odd about it – only changes were some bottom padding to handle my fixed footer and a default OTF font for the client. My section is the same – only some padding on top and bottom, nothing else.

It’s not published.

Thoughts?

can you supply the community with your read-only share link?

This will help us troubleshoot your issue. :slight_smile:

Hi @dkenzik, If you prefer to keep your site details private, you can submit a duplicated version of your site with all sensitive material removed or a reduced test case.

Also, from your screenshot, I’m not able to see the issue. :-/ Can you please be more specific with the trouble you’re seeing?

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

(Pinging @cyberdave too – I believe he’s the one I was dealing with in support. I want to make sure you are both on the same page.)

You aren’t seeing the issue?

The Tabs are to the right of the Tab Content, not on top. I thought that was fairly obvious.

Here is a screen shot of a totally empty page on my site in question with the Tabs widget:

It only occurs on my site in question (which you already have access to via your support@webflow.com channel already). If I create a new site, the Tabs widget renders properly, like so:

The only difference between the two sites is that I have some padding on my Body element and a different font on the site in question, as mentioned in my first note. Here is a shot of those Body style changes:

For the rest of the community, who may be able to explain why the Tabs widget is rendering like this, here is a juicy read-only link, based on a copy of the site in question:

https://preview.webflow.com/preview/tabs-broken?preview=2242581b0510a2ecbc5d196cde2f5f31

You’ll also notice that I removed all client information. There is a single page (Home) with no custom classes. Yet, when I look at my class list, there are a ton that can’t be removed – what’s up with that?

Hi @dkenzik, It looks like you have all your links set to float right. Hope that helps a bit :slight_smile:

@thewonglv - Thanks a ton, there!

I missed undo’ing a style test in my footer before creating a class for floating them right, thus applying it to everything. I just hadn’t noticed because I had no other links yet in my design, aside from the menu and buttons.

The Tab Widget had the only other “real” links (looks like link blocks behind the scenes), so that’s why I noticed it there.

Thanks for digging in and finding it.

I think I’ll post a feature request to allow inspection of classes via the style manager, instead of having elements selected. I think that would come in handy in many cases – especially when troubleshooting things like this.

Hi @dkenzik, yes, that would be a good feature to add, thanks for mentioning it. If you post that as a feature request, I am sure it will get some attention :smile:

Dave

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