CODEWITHSUNDEEP
csstwitter-bootstraptabs
Mark Z.
Mark Z.

Reputation: 2447

Bootstrap Tabs with Numerous Rows of Tabs - How to Make them Stack Bottom Up

Apparently the default behavior is for the Bootstrap tabs to stack like in the top image when there's more than 1 row of tabs. I'd like the "full" row of tabs to always be resting atop the content box (looks more natural) instead of the partially filled row. Anyone know how to achieve this? Note the tab order within the row should remain the same, just the row order is changed. Would greatly appreciate the help, thanks.

Bootstrap Tabs with Rows Stacking Bottom Up

Upvotes: 2

Views: 2789

Answers (1)

Conan
Conan

Reputation: 2709

I've been playing around with this recently and came up with a potential (partial) fix using flexbox (note, BS4 already utilises flexbox for tabs, although it still exhibits the same wrapping issue shown above):

/* for demo purposes only */
.demo {
  margin: 2em;
  max-width: 300px;
}

.tab-content {
  margin-top: 1em;
}

/* tab reordering fix - older browsers may require other prefixed rules */
.nav.nav-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="demo">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">[HOME TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="profile">[PROFILE TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="messages">[MESSAGES TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="settings">[SETTINGS TAB CONTENT]</div>
  </div>

</div>

The one remaining issue I'm still looking into is how to automatically move a tab to the bottom row if it's selected (in the example given here, clicking "Settings" works, but now looks removed from the tab body).

I've found a slight workaround (basically, if the top position of the clicked tab is above the top position of the currently active tab, swap the flex-wrap to wrap instead of wrap-reverse), but it feels flaky as hell! If I ever sort it, I'll try to remember to update this post :)

Upvotes: 1

Related Questions