CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Saurabh
Saurabh

Reputation: 674

bootstrap second tab content starts after leaving space for first tab content div

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

Answers (2)

Hondaman900
Hondaman900

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

Shady Alset
Shady Alset

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">

JsFiddle

Upvotes: 1

Related Questions