JustDanny JustDanny - 4 years ago 153
HTML Question

Bootstrap tab content goes down

i have "big" problem with my Bootstrap tab-pane content.

<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#masery1">Mastery Page 1</a></li>
<li><a data-toggle="tab" href="#masery2">Mastery Page 2</a></li>
<li><a data-toggle="tab" href="#masery3">Mastery Page 3</a></li>
<li><a data-toggle="tab" href="#masery4">Mastery Page 4</a></li>
<li><a data-toggle="tab" href="#masery5">Mastery Page 5</a></li>
</ul>

<div id="masery1" class="tab-pane fade in active">
<h1>Show the last 10 Games</h1>
</div>

<div id="masery2" class="tab-pane fade ">
<h1>Show the last 10 Games</h1>
</div>
<div id="masery3" class="tab-pane fade">
<h1>Show the last 10 Games</h1>
</div>
<div id="masery4" class="tab-pane fade">
<h1>Show the last 10 Games</h1>
</div>
<div id="masery5" class="tab-pane fade">
<h1>Show the last 10 Games</h1>
</div>


The Content goes on every tab a bit more down.
So #mastery1 lokks fine but #mastery2's content is 200px lower then #mastery1 etc etc.
I dont understand why. I check every .

You can see it here on the "Mastery Tab": https://lolstats.org/HORNETDanny/euw

Answer Source

You're missing a div for your mastery tabs. Wrap the mastery divs in a new div using tab-content.

<div class="tab-content">
    <div id="masery1" class="tab-pane fade in active">
         <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery2" class="tab-pane fade ">
         <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery3" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery4" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
    <div id="masery5" class="tab-pane fade">
        <h1>Show the last 10 Games</h1>
    </div>
</div>

This applies the following CSS rule:

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

Since divs have height, each div was taking up space on the page. Setting them to display: none, gives them no height. When a selected div has the active css class, the following rule is applied overriding the display none.

.tab-content>.active {
    display: block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download