Menu icon Foundation
Problem Embedding Grid within Tabs

I am having trouble getting grids to work correctly inside of tabs with Foundation 5.

The width of the columns doesn't extend to the full width of the page.

Stripped it down to the minimum in hopes it might help explain the problems I am having.

Thanks!

Update: Just to clarify, what is not working correctly is the grid area within tab1.

The Body is not taking the full 8 columns -- and the sidebar is not taking a full 4 columns.

<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Molajo</title>
    <link rel="stylesheet" href="/Css/normalize.css">
    <link rel="stylesheet" href="/Css/foundation.css">
    <script src="/Js/vendor/custom.modernizr.js"></script>
</head>
<body>
<dl class="tabs" data-tab>
    <dd class="active">
        <a href="#tab1">Tab1</a>
    </dd>
    <dd>
        <a href="#tab2">Tab2</a>
    </dd>
    <dd>
        <a href="#tab3">Tab3</a>
    </dd>
</dl>

<div class="tabs-content">
    <div class="content active" id="tab1">

        <div class="row">
            <div class="large-8 columns">
                <p>Body</p>
            </div>

            <div class="large-4 columns">
                <p>Sidebar</p>
            </div>
        </div>

    </div>
    <div class="content" id="tab2">
        <h3>Tab2</h3>
    </div>
    <div class="content" id="tab3">
        <h3>Tab3</h3>
    </div>
</div>

<script src="/Js/vendor/jquery.js"></script>
<script src="/Js/foundation/foundation.js"></script>
<script src="/Js/foundation/foundation.tab.js"></script>
<script>
    $(document).foundation({
        tab: {
            callback : function (tab) {
                console.log(tab);
            }
        }
    });
</script>
</body>
</html>

tabsgrid

I am having trouble getting grids to work correctly inside of tabs with Foundation 5.

The width of the columns doesn't extend to the full width of the page.

Stripped it down to the minimum in hopes it might help explain the problems I am having.

Thanks!

Update: Just to clarify, what is not working correctly is the grid area within tab1.

The Body is not taking the full 8 columns -- and the sidebar is not taking a full 4 columns.

<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Molajo</title>
    <link rel="stylesheet" href="/Css/normalize.css">
    <link rel="stylesheet" href="/Css/foundation.css">
    <script src="/Js/vendor/custom.modernizr.js"></script>
</head>
<body>
<dl class="tabs" data-tab>
    <dd class="active">
        <a href="#tab1">Tab1</a>
    </dd>
    <dd>
        <a href="#tab2">Tab2</a>
    </dd>
    <dd>
        <a href="#tab3">Tab3</a>
    </dd>
</dl>

<div class="tabs-content">
    <div class="content active" id="tab1">

        <div class="row">
            <div class="large-8 columns">
                <p>Body</p>
            </div>

            <div class="large-4 columns">
                <p>Sidebar</p>
            </div>
        </div>

    </div>
    <div class="content" id="tab2">
        <h3>Tab2</h3>
    </div>
    <div class="content" id="tab3">
        <h3>Tab3</h3>
    </div>
</div>

<script src="/Js/vendor/jquery.js"></script>
<script src="/Js/foundation/foundation.js"></script>
<script src="/Js/foundation/foundation.tab.js"></script>
<script>
    $(document).foundation({
        tab: {
            callback : function (tab) {
                console.log(tab);
            }
        }
    });
</script>
</body>
</html>

This post has been closed. No new replies can be added.

Amy Stephen over 5 years ago

Sounds like this might not be possible to create a grid within a tab according to https://twitter.com/DoerteDev/status/426729162410164225

I'll go ahead and close this.

Thanks!