Streaming live at 10am (PST)

Problem with Tab Pane alignment


#1

Hi Everyone,

I've used and manipulated the tabs feature many times, but this is the first time I've had a problem with the panes aligning behind each other. Instead, each pane shows up beneath the previous one as if they were "clearing left":

I've removed all custom settings for the Tabs, Tabs Menu, Tabs Content and Tab Pane elements with a few exceptions:

Tab Panes: Renamed, set custom pixel dimensions, and auto-centered margins
Tabs Content: Set custom pixel dimensions, Auto-centered margins, Set Background picture (centered)
Tabs Menu: Removed background fills, set custom pixel dimensions, set background picture, and added background images for different states (hover + pressed) to each link

After attempting to add text to my panes, the panes started stacking vertically, some even off-center.

Here's my read link:
https://webflow.com/design/sunstoneleadership12150906?preview=11faa965bce56c8d8e343157201f95f8

The section in question is "Course Learnings" under program, about 3/4 down the page. Screen shot below.

Can anyone see what I'm missing?


#2

I just noticed that in the first tab pane, I set the position center vertically (position 50% down, transform -50% up)-- I cleared that, and now that element stacks evenly as well:


#3

RESOLVED:

I noticed that each pane had the "Display Settings" Header in blue. By clicking it and 'removing settings', it cleared the pile up. Apparently each pane was visible during each active tab.

I think this happened because I was editing each tab using the navigation window vs selecting each tab individually through the settings menu.

Webflow doesn't like you doing that, so don't do it!


#4

Hi @FireOpal, Glad to hear you got it working. Let us know if there is any further issue with that. Cheers, Dave


#5