Resorting the active bootstrap tab when stacked

Question

For a new bootstrap website that I'm working on, I am sorting the active tab when the nav-tab stacks, so that the selected tab is always connected to the tab-pane. While this works, it feels like a hack to me. Is there a better way to accomplish this that preserves the original tab order?

Html markup:

<div id="tab-bundle" class="container-fluid">
    @Html.HiddenFor(model => model.SelectedBundle)
    <ul class="nav nav-tabs" id="coverageTabs">
         <li><a href="#Minimum">@LanguageDb.Me.Minimum</a></li>
         <li><a href="#Better">@LanguageDb.Me.Better</a></li>
         <li><a href="#Best">@LanguageDb.Me.Best</a></li>
         <li><a href="#Custom">@LanguageDb.Me.Custom</a></li>
    </ul>

    <div class="tab-content">
         <div class="tab-pane active bg-info" id="ajaxPanel">
            @Html.Partial("SelectedBundle", Model)
         </div>
    </div>
</div>

Javascript:

$(document).ready(function () {

    var updateCoverage = function (e) {
        e.preventDefault();
        var $tab = $(this);
        $('#SelectedBundle').val($(this).attr("href").substr(1));
        $('#coverageTabs a').css({ backgroundColor: "", color: "" });

        // ajax omitted for brevity
        $tab.tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color'));

        if ( $('#coverageTabs').width() < 768 ) {
          $tab.closest('li').appendTo('#coverageTabs');
        }
    };

    $('a[href=#' + $('#SelectedBundle').val() + ']').tab('show').css('background-color', $('#ajaxPanel').css('background-color')).css('color', $('#ajaxPanel').css('color')); ;

    $('#coverageTabs a').click(updateCoverage);

});

Screenshot (notice the Minimum tab has moved to the end):

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

This reminds a bit of a recent question I just answered:

Unordered list - list item position

The idea is that with really minimal JavaScript—say, the adding and removal of an 'active' class—we can still achieve what you're trying to do:

Your CSS could contain something like this:

ul {
  display: flex;
}

li[class=active] {
  order: 4; /* whatever the last <li> slot is */
  background: green
}

Then, when your JavaScript assigns the active class, the <li class="active"> should just magically reorder itself to the end of the list and be connected to the tab pane.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 26 '16 at 08:06

Andy Hoffman

18,436
4
42
61

I had a chance to try this out and discovered that changing ul to display:flex prevented bootstrap from stacking the tabs. This is still helpful but since it removed some expected bootstrap functionality, I had to remove it as the accepted answer. – B2K May 03 '16 at 21:55
Sorry about that. I'll keep this in mind next time I consider a flexbox solution for a Bootstrap-related question. – Andy Hoffman May 03 '16 at 21:57
1

Found a solution `@media screen and (max-width: 768px) {ul {flex-direction: column;} }` – B2K May 03 '16 at 22:00
From http://stackoverflow.com/questions/33092387/flexbox-results-in-bootstrap-columns-not-stacking-on-small-window-size-resize – B2K May 03 '16 at 22:01

Resorting the active bootstrap tab when stacked

1 Answers1