Bootstrap5 tab content on second tab creates unlimited white space

Question

in my project I want to show statistics for the current month and the current year. To split this statistics I created a card with tabs that split month and year. The month tab is loaded as default. If i now go on the year tab everything is loading but then it will load unlimited empty "stuff / white data" (I don't know how to explain it better), and you can't use this tab because the site will be bigger and bigger. There is also no error in the

This has first been poped up after I changed alle my charts (chart.js) to an dynamic way that you can go eg to the next month or the month before. If I load all charts with "fixed" data then the tab works correctly.

What is the problem?

Actual look:

How it has to be looked:

After some testing i see this:

Code snippet:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-header"> <div> <ul class="nav nav-pills nav-fill mt-4" role="tablist"> <li class="nav-item active"> <a class="nav-link" data-bs-toggle="tab" href="#Month" role="tab"> <span><strong>Current Month</strong></span> </a> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#Year" role="tab"> <span><strong>Current Year</strong></span> </a> </li> </ul> </div> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active" id="Month" role="tabpanel"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="card-header d-flex justify-content-between align-items-center"> <h2 class="card-title" id="month"></h2> <div class="justify-content-end"> <button class="btn btn-info last-month" id="last-month"><i class="fas fa-chevron-left"></i></button> <button class="btn btn-info current-month" id="current-month">Current Month</button> <button class="btn btn-info next-month" id="next-month"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse"> <h2 class="card-title text-white" id="monthly_training_sessions"></h2> </div> <div class="card-body"> <span class="badge chart-label-intervall">Intervall</span> <span class="badge chart-label-longrun">Longrun</span> <span class="badge chart-label-speedwork">Speedwork</span> <span class="badge chart-label-stabilisation">Stabilisation</span> <span class="badge chart-label-competition">Competition</span> <span class="badge chart-label-cycling">Cycling</span> <span class="badge chart-label-swimming">Swimming</span> <br><br> <canvas id="monthy_session_stats" width="180" height="180"></canvas> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse d-flex justify-content-between"> <h2 class="card-title text-white" id="monthly_training_days"></h2> <h2 class="card-title text-white" id="monthly_injury_days"></h2> </div> <div class="card-body"> <div class="d-flex justify-content-evenly" style="margin-bottom: 18px"> <span class="badge chart-label-training">Training</span> <span class="badge chart-label-injury">Free</span> <span class="badge chart-label-free">Injury</span> </div> <br> <canvas id="monthy_training_stats" width="180" height="180"></canvas> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse"> <h2 class="card-title text-white">Shoes</h2> </div> <div class="card-body"> <div class="table-responsive"> <table class="table"> <tbody id="monthly_shoes_stats"> </tbody> </table> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="Year" role="tabpanel"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="card-header d-flex justify-content-between align-items-center"> <h2 class="card-title" id="year"></h2> <div class="justify-content-end"> <button class="btn btn-info last-year" id="last-year"><i class="fas fa-chevron-left"></i></button> <button class="btn btn-info current-year" id="current-year">Current Year</button> <button class="btn btn-info next-year" id="next-year"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse"> <h2 class="card-title text-white" id="yearly_training_sessions"></h2> </div> <div class="card-body"> <span class="badge chart-label-intervall">Intervall</span> <span class="badge chart-label-longrun">Longrun</span> <span class="badge chart-label-speedwork">Speedwork</span> <span class="badge chart-label-stabilisation">Stabilisation</span> <span class="badge chart-label-competition">Competition</span> <span class="badge chart-label-cycling">Cycling</span> <span class="badge chart-label-swimming">Swimming</span> <br><br> <canvas id="yearly_session_stats" width="180" height="180"></canvas> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse d-flex justify-content-between"> <h2 class="card-title text-white" id="yearly_training_days"></h2> <h2 class="card-title text-white" id="yearly_injury_days"></h2> </div> <div class="card-body"> <div class="d-flex justify-content-evenly" style="margin-bottom: 18px"> <span class="badge chart-label-training">Training</span> <span class="badge chart-label-injury">Free</span> <span class="badge chart-label-free">Injury</span> </div> <br> <canvas id="yearly_training_stats" width="180" height="180"></canvas> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-header bg-inverse"> <h2 class="card-title text-white">Shoes</h2> </div> <div class="card-body"> <div class="table-responsive"> <table class="table"> <tbody id="yearly_shoes_stats"> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

After a lot of researching and reading i found the solution for this problem.

The problem occurs because of the hidden content from the hidden tab, which is realized in Bootstrap via "display: none".

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

To fix this problem you can use height: 0 and overflow-y: hidden to this . Now the charts will stay in place and no empty random space will created.

.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 

Answer 2

It will take a little minute to go through that line by line but some of the problem is sure to be your structure of Rows and Columns. I noticed this in the first few lines - Just inside the tab-content is this...

 <div class="tab-pane active" id="Month" role="tabpanel">
               <div class="row">
                 <div class="col-md-12">
                   <div class="row">

With Bootstrap you're not really meant to have the Row's inside the Column's and I think what's happening is that the un-natural layout of the code is creating errors like the one you see. This answer does not discover where your white-space is coming from but I do suspect that fixing the layout of the code will also fix the white-space.