Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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()); }); 
like image 356
Davor Avatar asked Sep 08 '13 11:09

Davor


1 Answers

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.

like image 100
Gokhan Demirhan Avatar answered Sep 27 '22 22:09

Gokhan Demirhan