Bootstrap tab automatically set tab height according to the content

Question

I have bootstrap tabs like following:

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#home">Tab home</a></li>
  <li><a data-toggle="tab" href="#menu1">Tab menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Tab menu 2</a> </li>
  <div class="input-group" style="margin-bottom: 0 !important;margin-top: 5px;padding-left:50px;">
      <input type="text" class="form-control txtSearch" placeholder="Search for...">
      <span class="input-group-btn">
          <button class="btn btn-default btnSearchAgain" type="button" style="border: 1px #cfcfcf solid !important;padding: 6px !important;">Search</button>
      </span>
  </div>
</ul>

And the tabs themselves look like this:

<div id="home" class="tab-pane fade in"> </div>
<div id="menu1" class="tab-pane fade "> </div>
<div id="menu1" class="tab-pane fade "> </div>

As you can see none of the tabs have active class initially... And one of them HAS to have an active class for me in order to show it.

If I do add an active class to home tab lets say... Then when I click on other tabs, their height doesn't shrinks or spreads accordingly to the content of the tab. Instead both other 2 tabs have the height of the first tab (which is huge) if I do it like this:

<div id="home" class="tab-pane fade in active"> </div>
<div id="menu1" class="tab-pane fade "> </div>
<div id="menu1" class="tab-pane fade "> </div>

Note that I added the active class to the first tab...

My question is, how can I make all of the tabs to resize automatically to the content that they are filled with when they are being clicked on?

If I don't add any active class to them, then resizing option works, however If I do add either through HTML or jQuery active class to them, then I'm in trouble and resizing option doesn't works..

I've tried this as well in jQuery:

$('.nav-tabs a[href="#home"]').tab('show');

First tab home shows up when page is loaded, but then again I face the same issue, clicking on 2 other tabs, they keep the same height as first tab, and horizontal scroll is a mile long ...

What can I do to fix this ??

Answer 1

Seems like you are missing the container required for the tabs content panel:

<div class="tab-content">

Wrapping the content of your tabs with that will fix the issue, your markup needs to be like:

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    ...
  </div>
  <div id="menu1" class="tab-pane fade">
    ...
  </div>
  <div id="menu2" class="tab-pane fade">
    ...
  </div>
</div>

Bootply Demo