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());
});

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.

Answer 2

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

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());
});

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;
}

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).

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.

Answer 7

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

Works well :)

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);
    });
});

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});
});