Davor Davor - 2 months ago 28
CSS Question

Bootstrap 3.0 affix with list changes width

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

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.

Comments