title: Bootstrap tab automatically set tab height according to the content
body: <p>I have bootstrap tabs like following:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li&gt;&lt;a data-toggle="tab" href="#home"&gt;Tab home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Tab menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Tab menu 2&lt;/a&gt; &lt;/li&gt;
    &lt;div class="input-group" style="margin-bottom: 0 !important;margin-top: 5px;padding-left:50px;"&gt;
        &lt;input type="text" class="form-control txtSearch" placeholder="Search for..."&gt;
        &lt;span class="input-group-btn"&gt;
            &lt;button class="btn btn-default btnSearchAgain" type="button" style="border: 1px #cfcfcf solid !important;padding: 6px !important;"&gt;Search&lt;/button&gt;
        &lt;/span&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the tabs themselves look like this:</p>
  
  <pre><code>&lt;div id="home" class="tab-pane fade in"&gt; &lt;/div&gt;
  &lt;div id="menu1" class="tab-pane fade "&gt; &lt;/div&gt;
  &lt;div id="menu1" class="tab-pane fade "&gt; &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="home" class="tab-pane fade in active"&gt; &lt;/div&gt;
  &lt;div id="menu1" class="tab-pane fade "&gt; &lt;/div&gt;
  &lt;div id="menu1" class="tab-pane fade "&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Note that I added the active class to the first tab... </p>
  
  <p>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? </p>
  
  <p>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..</p>
  
  <p>I've tried this as well in jQuery:</p>
  
  <pre><code>$('.nav-tabs a[href="#home"]').tab('show');
  </code></pre>
  
  <p>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 ... </p>
  
  <p>What can I do to fix this ??</p>