CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptabs
learnscripting88
learnscripting88

Reputation: 13

Bootstrap tab is starting with big Whitespace in Secondtab

I have a form which is in many tabs like tab1, tab2, tab3. It just bunch of inputs form. I want to submit all the form content as one. But the problem is my second tab is starting from where the first form stops. So I have huge black space at top of second tab. I have attached the JSfiddle link below. Let me know if you have any questions.

 <div class="col-sm-12">
<h1>
  My Heading
</h1>
<div class="panel panel-default">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#info1" data-toggle="tab">Info 1</a></li>
    <li class=""><a href="#info2" data-toggle="tab">Info 2</a></li>
  </ul>
  <div class="panel-body no-padding">
    <div class="tab-content">
      <form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div id="info1" class="tab-pane fade active in">  
<fieldset>
  <div class="col col-sm-4">
    <section>
      <label class="input">Name
        <input type="text" name="name" value="">
      </label>
    </section>
    <section>
      <label class="input">Age
        <input type="text" name="" value="">
      </label>
    </section>
  </div>
  <div class="col col-sm-4">
    <section>
      <label class="input">Sex
        <input type="text" name="address1" value="">
      </label>
    </section>
    <section>
      <label class="input">Location
        <input type="text" name="address2" value="">
      </label>
    </section>
  </div>
  <div class="col col-sm-4">
    <section>
      <label class="input">City
        <input type="text" name="city" value="">
      </label>
    </section>
    <section>
      <label class="input">State
        <input type="text" name="state" value="">
      </label>
    </section>
  </div>
  </fieldset>
</div>
<div id="info2" class="tab-pane fade">
  <fieldset>
  <div class="col col-sm-4">
    <section>
      <label class="input">Input 1 tab 2
        <input type="text"/>
      </label>
    </section>
    <section>
      <label class="input">Input 2 tab 2
        <input type="text"/>
      </label>
    </section>
  </div>
  <div class="col col-sm-4">
    <section>
      <label class="input">Input 3 tab 2
        <input type="text"/>
      </label>
    </section>
    <section>
      <label class="input">Input 3 tab 2
        <input type="text"/>
      </label>
    </section>
  </div>
  <div class="col col-sm-4">
    <section>
      <label class="input">Input 4 tab 2
        <input type="text"/>
      </label>
    </section>
    <section>
      <label class="input">Last Input
        <input type="text"/>
      </label>
    </section>
  </div>
  </fieldset>
</div>
  <footer>
    <button type="submit" class="btn btn-primary">Submit</button>
  </footer>
</form>

    </div>
  </div>
</div>

JSFiddle for Bootstrap tab form

Upvotes: 1

Views: 2051

Answers (3)

rishijd
rishijd

Reputation: 1344

The content of tab1 is actually in tab2, it's just invisible - as you probably know from your question. On tab1, the content of tab2 is there too - meaning, you can see the space for it at the bottom.

Are you using the Javascript library needed for this to work?

https://getbootstrap.com/docs/3.3/components/

Using navs for tab panels requires JavaScript tabs plugin For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

and that links to: https://getbootstrap.com/docs/3.3/javascript/#tabs

Are you customizing any CSS or following Bootstrap to the T to test this?

Upvotes: 0

Athul Nath
Athul Nath

Reputation: 2606

Here the problem is with the css. In bootstrap the css for tab is written as 

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

here .tab-pane should be direct child (In your case it is form) Inorder to solve you issue You should change ur css in bootstrap or you have to write in your custom.css like below :

.tab-content .tab-pane {
  display: none;
}

.tab-content  .active {
  display: block;
}

Upvotes: 4

johna
johna

Reputation: 10772

The issue is caused by your use of fade and in on the tab-panes.

If you remove those and also reposition your form tag so that it is not an element inside tab-content then I think this is the result you are looking for.

  <div class="panel panel-default">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#info1" data-toggle="tab">Info 1</a></li>
      <li class=""><a href="#info2" data-toggle="tab">Info 2</a></li>
    </ul>
    <div class="panel-body no-padding">
      <form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
        <div class="tab-content">
          <div id="info1" class="tab-pane active">
            <fieldset>
              <div class="col col-sm-4">
                <section>
                  <label class="input">Name
        <input type="text" name="name" value="">
      </label>
                </section>
                <section>
                  <label class="input">Age
        <input type="text" name="" value="">
      </label>
                </section>
              </div>
              <div class="col col-sm-4">
                <section>
                  <label class="input">Sex
        <input type="text" name="address1" value="">
      </label>
                </section>
                <section>
                  <label class="input">Location
        <input type="text" name="address2" value="">
      </label>
                </section>
              </div>
              <div class="col col-sm-4">
                <section>
                  <label class="input">City
        <input type="text" name="city" value="">
      </label>
                </section>
                <section>
                  <label class="input">State
        <input type="text" name="state" value="">
      </label>
                </section>
              </div>
            </fieldset>
          </div>
          <div id="info2" class="tab-pane">
            <fieldset>
              <div class="col col-sm-4">
                <section>
                  <label class="input">Input 1 tab 2
        <input type="text"/>
      </label>
                </section>
                <section>
                  <label class="input">Input 2 tab 2
        <input type="text"/>
      </label>
                </section>
              </div>
              <div class="col col-sm-4">
                <section>
                  <label class="input">Input 3 tab 2
        <input type="text"/>
      </label>
                </section>
                <section>
                  <label class="input">Input 3 tab 2
        <input type="text"/>
      </label>
                </section>
              </div>
              <div class="col col-sm-4">
                <section>
                  <label class="input">Input 4 tab 2
        <input type="text"/>
      </label>
                </section>
                <section>
                  <label class="input">Last Input
        <input type="text"/>
      </label>
                </section>
              </div>
            </fieldset>
          </div>
          <footer>
            <button type="submit" class="btn btn-primary">Submit</button>
          </footer>

        </div>
      </form>
    </div>
  </div>

Updated JSFiddle

Upvotes: 0

Related Questions