Reputation: 674
Simple Bootstrap 3 Tabs:
https://jsbin.com/yakuja/edit?html,output
I am creating tabs using bootstrap 3. Only issues is that the contents of second tab starts after adding the space on top for first tab.
In ideal scenario there should be no space above content
<div class="col-sm-9">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">
<a href="#uploadFormat" data-toggle="tab">Client Upload Format</a>
</li>
<li role="presentation">
<a href="#upload" data-toggle="tab">Client Bulk Upload</a>
</li>
</ul>
<div class="tab-content">
<br/>
<div class="tab pane fade active in" id="uploadFormat">
<div class="form-bottom">
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
<p>saurabh</p>
</div>
</div>
<div class="tab pane fade" id="upload">
<form>
<fieldset>
<div class="form-group">
<label for="client_upload_file">Upload Client File</label>
<input type="file" name="client_upload_file" id="client_upload_file"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm" type="submit" name="clientUpload">Upload Client File</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Upvotes: 0
Views: 822
Reputation: 139
If you have this same issue, but no typos causing it, try changing your CSS tab-content
attribute from "display: none
" to "visibility: hidden
"
.tab-content > .tab-pane {
display: block; /* undo "display: none;" */
visibility: hidden;
}
That fixed this issue for me.
Upvotes: 0
Reputation: 5714
You have a syntax error in class name at line:
<div class="tab pane fade" id="upload">
// ^
To solve problem it should be:
<div class="tab-pane fade" id="upload">
Upvotes: 1