Tab Padding weirdness

  • 1
  • Problem
  • Updated 5 years ago
  • Solved
So I have tab component on one of my pages -- and I've got three tabs set up. 
Tabs 1 & 3 are a-ok, but Tab 2 keeps giving me issues. 

Basically, when I'm on either of the good tabs, I've got about a quarter inch of space between the sidebar & the skuid components; however, on the 2nd tab, I have an extra quarter inch of padding.

I've tried rearranging the tabs, deleting the tab, creating multiple new tabs, adding components & fields... but still having the issue with that tab and any others created.

It's strange because my original tab, as well as the third tab I created are working fine (albeit, the third tab does give me about 2-3 extra pixels worth of padding).

Thoughts anyone?

Tab 1 Selected:


Tab 2 Selected:

Photo of Pat Hicks

Pat Hicks

  • 898 Points 500 badge 2x thumb
  • confused

Posted 5 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
This is very strange indeed. 

Some follow on questions: 
- Do you have any custom CSS on the page? 
- What are the contents of the tabs in question?  If you strip the contents out of the tabs (Move the contents below the tabset) does it still misbehave? 

Would you mind giving us Login Rights so we can look? 

Photo of Pat Hicks

Pat Hicks

  • 898 Points 500 badge 2x thumb
I am using custom CSS -- but even with that removed I'm still getting the issue.
As far as content, I've tried field editors, tables & no content - no difference.

Login access granted!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Pretty strange.  We'll look into it deeper in the morning.  The salesforce sidebar has a "colapsed" div that is getting an extra 20 pixels injected into it when you are on the second tab.  If you remove the sidebar the problem will certainly go away.  (that is a setting in the page properties)  See below: 



Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Pat,

I played around with this a bit and was able to recreate this in one of my orgs.  It looks like Salesforce's adjustable sidebar is causing this extra padding.  I added this CSS rule to my page and it seemed to fix the issue.

.sidebarCollapsed {    
    padding:0;
}


Photo of Pat Hicks

Pat Hicks

  • 898 Points 500 badge 2x thumb
Awesome - Thanks, Ben.
This does seem to work  -- sitting a bit closer to the sidebar than before, but that's a reasonable trade-off versus having the tabset shifting around the page.