Menu icon Foundation
Rows & Columns Inside Tabs

I have a complex form using various column lengths and offsets that goes across a tab control. The first tab works great and the form looks as desired. The problem is when moving to the second tab it isn't honoring the column classes.

How should this be structured? I have tried a few variations, but can't seem to make it work. Should each tab contain it's own row, etc.?

Rowscolumnstabs

I have a complex form using various column lengths and offsets that goes across a tab control. The first tab works great and the form looks as desired. The problem is when moving to the second tab it isn't honoring the column classes.

How should this be structured? I have tried a few variations, but can't seem to make it work. Should each tab contain it's own row, etc.?

Steve Trask almost 6 years ago

Hi Scott,

Is there a chance to see the code you have used, they should be honouring the grid as much as the first tab.

Thanks

Steve

Roger Coathup almost 6 years ago

We are experiencing similar problems -- it appears tabs 'calculate' their width to the width of the widest content in the tab, and not to the width of the tabbed area -- so, columns are a percentage of the width of the widest element, and not a percentage of the width of the tab.

e.g. with the following code the columns won't go full width of the tab:

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
</dl>
<div class="tabs-content">
  <div class="content active" id="panel2-1">
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div> 
  </div>
  <div class="content" id="panel2-2">
    <p>Second panel content goes here...</p>
  </div>

</div>

However, if you add a 'wide' paragraph into tab 1, the columns will go as wide as the paragraph, e.g.:

...
<div class="content active" id="panel2-1">
    <p>some 'wide' text taking up more width, and letting our columns get wider in sid ethe tab</p>
    <div class="row">
       <div class="small-4 columns">
            col 1
       </div>
       <div class="small-4 columns">
            col 2
       </div> 
      <div class="small-4 columns">
            col 3
       </div>   
    </div>
... 

Rafi Benkual almost 6 years ago

@scott - Not sure what the issue is without seeing your code.

@Roger
You do not need to define columns for each panel. I made a codepen of your example with the code cleaned up. I think these are the results you wanted.
http://cdpn.io/HkCgf

Roger Coathup almost 6 years ago

@Rafi -- my code was correct, and illustrates the problem.

I want to have 3 columns on one of the tabs -- and that's the thing that doesn't work correctly. Foundation isn't calculating the column widths correctly when they are on a tab.

Brandon Arnold almost 6 years ago

This should work out for you. Just have to make sure tabs are 100% width. We may need to fix this so it's default, but the engineer may have done it on purpose for some reason. I'll check it out.

For now just use this css
http://cdpn.io/jlwGv

Roger Coathup almost 6 years ago

Thanks Brandon, that fixed the problem. Any news on whether this will default in the future?