CODEWITHSUNDEEP
htmlcsstwitter-bootstraptabsbootstrap-4
Nathan Bernard
Nathan Bernard

Reputation: 508

Bootstrap 4 how to equal height two tab panes?

Since I'm using Bootstrap 4 native classes to create two tab panes with content, I was wondering if there is any specific class to make the two content panes (class .tab-pane) equal in height?

My html is:

<div class="d-flex flex-column">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#second">TWO</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane container active show" id="first">        
            // content
        </div>
        <div class="tab-pane container fade" id="second">
            // content
        </div>
    </div>
</div>

if not, even some css to fix it would be cool, I tried with flex: 1 1 auto on the outer div and flex: 1 0 100% on the two pane, but doesn't work either.

Upvotes: 7

Views: 6181

Answers (3)

ValarDohaeris-fuck-OpenAI
ValarDohaeris-fuck-OpenAI

Reputation: 6308

You can use the Tabs with consistent height CSS Trick.

The following changes are required:

  • Use visibility: hidden; instead of display: none; for inactive tabs
  • Use display: flex; on the tab container
  • Set width: 100%; and margin-right: -100%; for tab panes

Please note that using visibility: hidden will make the browser render all tabs, so if the content is complex, this could have a negative impact on performance.

Putting it all together:

.consistent-height .tab-content {
  display: flex;
}

.consistent-height .tab-content > .tab-pane {
  display: block; /* undo "display: none;" */
  visibility: hidden;
  margin-right: -100%;
  width: 100%;
}

.consistent-height .tab-content > .active {
  visibility: visible;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="consistent-height">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab-one" data-toggle="tab" href="#one" role="tab" aria-controls="home" aria-selected="true">One</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab-two" data-toggle="tab" href="#two" role="tab" aria-controls="profile" aria-selected="false">Two</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="one" role="tabpanel" aria-labelledby="tab-one">
      One line
    </div>
    <div class="tab-pane fade" id="two" role="tabpanel" aria-labelledby="tab-two">
      Two<br>lines
    </div>
  </div>
  <div class="alert alert-warning mt-3" role="alert">
    This box is not jumping around when switching tabs. The box position is adapted when the container width changes.
  </div>
</div>

Upvotes: 13

Ralf
Ralf

Reputation: 729

Since I was unsuccessful finding a solution that worked for me, I wrote my own:

  maxheight = 0;
  tabs = jQuery('.tab-content .tab-pane');
  jQuery.each(tabs, function() {
      this.classList.add("active"); /* make all visible */
      maxheight = (this.clientHeight > maxheight ? this.clientHeight : maxheight);
      if (!jQuery(this).hasClass("show")) {
          this.classList.remove("active"); /* hide again */
      }
  });
  jQuery.each(tabs, function() {
      jQuery(this).height(maxheight);
  });

Upvotes: 4

Jheyman Mejia
Jheyman Mejia

Reputation: 139

You could use the property min-height in the class tab-content.

For the example I used values ​​in pixels, I recommend using percentages or apply values ​​in rem or em, as you see fit.

.tab-content {
  background-color: yellow; /*Only for visual example*/
  min-height: 100px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="d-flex flex-column">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active show" data-toggle="pill" href="#first">ONE</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#second">TWO</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane container active show" id="first">
      Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page. Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks
      at StackPath.
    </div>
    <div class="tab-pane container fade" id="second">
      Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath.
    </div>
  </div>
</div>

Upvotes: 3

Related Questions