Menu icon Foundation
Padding for Vertical Tabs content area?

The body content for each vertical tab by default seems to be flush left with the right margin of the tab. Is there a way to get some space between the vertical tabs on the left and the tab content display area to the immediate right?

I've tried $tabs-content-padding: ($column-gutter/2); in SASS, wrapping my tab content in a div with a class that has padding, creating a separate row for the tab content. Can't seem to get any space.

You don't need any extra classes.

tabsverticalpadding

The body content for each vertical tab by default seems to be flush left with the right margin of the tab. Is there a way to get some space between the vertical tabs on the left and the tab content display area to the immediate right?

I've tried $tabs-content-padding: ($column-gutter/2); in SASS, wrapping my tab content in a div with a class that has padding, creating a separate row for the tab content. Can't seem to get any space.

You don't need any extra classes.

Rafi Benkual about 4 years ago

In CSS

.tabs-content > .content {
  padding: 1rem;
}

or Scss

$tabs-content-padding: 1rem;

Jay Todtenbier about 4 years ago

Tried $tabs-content-padding: 1rem;

Still no space between tab buttons and tab content. Even copied in the vertical tabs foundation example to see if somehow I was generating the tabs wrong with php. Got same result with both. Horizontal tabs look fine but vertical looks just like the example on the foundation page.

Rafi Benkual about 4 years ago

Are any of your Sass changes working? Might have another issue with your setup.

Jay Todtenbier about 4 years ago

Sass working fine. Just tested with $row-width: rem-calc(1500); Changed from 1100 to 1500. Perhaps we are not talking about the same thing? I'm trying to get space between the tab and the tab content. Not really trying to get more padding inside of the tab content. Even in the Foundation Tab Vertical example, the tab content is jammed up against the tab's right border. That's where I am trying to get space is between the tab and the tab content area. This is only a problem on Vertical tabs. Horizontal tabs looks great with the default settings because the tab content area doesn't begin until about 20px below the bottom margin of the horizontal tabs. Anyway I can post another screenshot on this thread to show what I mean?

Jay Todtenbier about 4 years ago

Was missing "vertical" for the . Had it on the first part ul class="tabs vertical" data-options="deep_linking:true; scroll_to_content:false;" data-tab>. Working fine now. Thank you.

Jay Todtenbier about 4 years ago

Was missing "vertical". Don't see this in the Foundation example for using Vertical Tabs.
HTML
<div class="tabs-content vertical">