Foundation
-
FollowReplies
-
Tabs to cover full length of Div
byAndrew Walker Sunday, January 04, 2015 at 3:20 PM EST
Is it possible to have tabs, so they cover the full length of a div, and then divide each tab equally, so they are the same size?
I have a large-8 column, and I would like to add 3 tabs, but it looks a little odd having three with a large space. Not looking to hack any CSS, just asking if its possible with the CSS already available ?
Thanks in advance
<div class="large-8 column">
<dl class="tabs" data-tab>
<dd class="active"><a href="#panel1">My Questions</a></dd>
<dd><a href="#panel2">My Comments</a></dd>
<dd><a href="#panel3">My Votes</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>Questions by User</p>
</div>
<div class="content" id="panel2">
<p>Comments by User </p>
</div>
<div class="content" id="panel3">
<p>Votes by User</p>
</div>
</div>
</div>
Andrew Walker
almost 5 years ago
Perfect. Thank you for that. I just had to take this line from F3 css:
.tabs.three-up dt, .tabs.three-up dd, .tabs.three-up li { width: 33.33%; }
And it worked a treat.
Thanks again.
Hello Andrew,
F3 had a feature for sizing the tabs evenly in a container:
http://foundation.zurb.com/docs/v/3.2.5/tabs.php
Couldn't find the docs for this feature on F4/F5 though.