Bootstrap 3.0 affix with list changes width

Davor picture Davor · Sep 8, 2013 · Viewed 14.7k times · Source

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

Gokhan Demirhan picture Gokhan Demirhan · Nov 30, 2013

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.