i've seen few questions similar this, not hitting exact same problem have seen.
i know how make grids (more or less) work inside tab pane. however, don't seem working expect. expect see set of tabs, each using own personal space display grid-contained data. see, instead, sets of tabs data attempting share same grid space, , therefore rows of data stacking pushed down page. entire tab area twice high necessary, data on tab2 being located on bottom half of tab pane, while top half empty (or holding data tab1).
example:
<div class="container"> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li> <li><a data-toggle="tab" href="#tab2">tab2</a></li> </ul> <div id="tab-content"> <div id="tab1" class="tab-pane fade in active"> <div class="row"> <div class="col-sm-6"> ...tab1, col1 information... </div> <div class="col-sm-6"> ...tab1, col2 information... </div> </div> </div> <div id="tab2" class="tab-pane fade in active"> <div class="row"> <div class="col-sm-6"> ...tab2, col1 information... </div> <div class="col-sm-6"> ...tab2, col2 information... </div> </div> </div> </div> </div> </div> </div> what i'm trying figure out if i'm coding wrong or if bootstrap not support i'm trying accomplish. have tested idea of removing .row divs, no success. (the data stacks unevenly, rather staying in separate rows.) appears if .col*-* classes unable share same space, while hidden.
any ideas?
you're missing .tab-content class on container tabs, applies display:none hidden ones. also, both of tabs have active class, makes both of them show @ beginning.
here markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab1">tab1</a> </li> <li><a data-toggle="tab" href="#tab2">tab2</a> </li> </ul> <div id="tab-content" class="tab-content"> <div id="tab1" class="tab-pane fade in active"> <div class="row"> <div class="col-sm-6"> ...tab1, col1 information... </div> <div class="col-sm-6"> ...tab1, col2 information... </div> </div> </div> <div id="tab2" class="tab-pane fade"> <div class="row"> <div class="col-sm-6"> ...tab2, col1 information... </div> <div class="col-sm-6"> ...tab2, col2 information... </div> </div> </div> </div> </div> </div> </div>
Comments
Post a Comment