Bootstrap 3.0 affix with list changes width

Question

I'm migrating to bootstrap 3.0.0 and I'm having issues with an affixed menu to the left: as soon as it becomes affixed (after 10px scroll), its width changes. In this fiddle it gets smaller, in my real site it gets wider and expands on the actual content.

It worked perfectly with bootstrap v2.3.2. After checking it looks like the list items don't play well with the .affix {position: fixed;} that appears.

Any ideas?

SOLUTION: based on the latest comments I have finally added this JS piece which fixes it nicely without having to set a fixed width to the affixed element:

$(function() {
    var $affixElement = $('div[data-spy="affix"]');
    $affixElement.width($affixElement.parent().width());
});

Seagirt

Actually it has the same behaviour without a list (with form elements for example) – Seagirt

Affix width issue and some fixes if anyone interested. – Great

@Great very cool, thanks! I can finally remove the hack from my code and have a proper solution in place (hopefully they'll add it to v3.1) – Seagirt

Answer 1

I had the same problem and fixed with this:

 $(window).resize(function () {
                $('#category-nav.affix').width($('#content').width());
            });

basically in an event of resize I calculate the content div's width and set the width of affixed element to that.

Tripedal

Only the resize event does not work for me (Primefaces/Bootsfaces). But using the scroll event (below solutions) did the trick. – Tarr

Answer 2

$(window).scroll(function () {
    $('#secondary .widget-area.affix').width($('#secondary').width());
});

Tourism

Answer 3

Here's another version:

$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});

Muir

Answer 4

Here's my version.

var fixAffixWidth = function() {
  $('[data-spy="affix"]').each(function() {
    $(this).width( $(this).parent().width() );
  });
}
fixAffixWidth();
$(window).resize(fixAffixWidth);

CSS

div.affix {
    position: fixed !important;
}

Erective

Answer 5

had the same problem once (only in BS 2.3.2).

Not an answer, more a hack: I gave the affixed element a width. That sucked, because i had to set width for all resolutions (RWD) and actually the value should be standard column width (e.g. .span4).

Yes: position: fixed takes the element out of the given context (in your case col-md-3).

Very

Thanks - it did work but quite a horrible hack with lots of media queries to make it responsive-ish... Hopefully Bootstrap patches it at some point! – Seagirt

Answer 6

I use this code to fix the width of the affix.

$(document).on('affixed.bs.affix',function(e){
    $('.affix').each(function(){
        var elem = $(this);
        var parentPanel = $(elem).parent();
        var resizeFn = function () {
            var parentAffixWidth = $(parentPanel).width();
            elem.width(parentAffixWidth);
        };      

        resizeFn();
        //$(window).resize(resizeFn);
    });
});

The affix get the width of his parent and check that width on every scroll the web. Uncommenting the last line, execute too on resize window event.

Gemma

Answer 7

I used $('.affix-element').width($('.affix-element-parent').width()).affix()

Works well :)

Pietje

Answer 8

My solution as well:

$('.menu-card').affix();
$(document).on('affix.bs.affix', '.menu-card', function() {
    $(this).width($(this).width());
});

(.menu-card is my sticky div)

I added this for supporting the window resizing:

Let's assume the affix are in a parent div #menu-card-pane.

$(window).resize(function () {
    var parentSize = $('#menu-card-pane').width();
    $('.affix').each(function() {
        var affixPadding = $(this).innerWidth() - $(this).width();
        $(this).width(parentSize - affixPadding);
    });
});

Baltazar

Answer 9

Here is my HTML

            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Committees</span>
                    </div>
                    <div id="committees-navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250">
                            <li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

And this is my JS fix

$(function () {
   var resize = function () {
      var sidebarNav = $(".sidebar-nav");
      var sidebarNavAffix = $(".sidebar-nav .affix");
      if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) {
             sidebarNavAffix.width(sidebarNav.width());
      }
   }

   $(window).on({"scroll" : resize, "resize" : resize});
});

Chian