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

Actually it has the same behaviour without a list (with form elements for example) — Davor, Sep 08 '13 at 12:59
[Affix width issue and some fixes](https://github.com/twbs/bootstrap/issues/6350) if anyone interested. — Sisir, Nov 21 '13 at 10:46
@Sisir 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) — Davor, Nov 22 '13 at 15:39

score 11 · Accepted Answer · answered Nov 30 '13 at 15:29

11

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.

answered Nov 30 '13 at 15:29

Gokhan Demirhan

1,099
10
14

Only the resize event does not work for me (Primefaces/Bootsfaces). But using the scroll event (below solutions) did the trick. – tak3shi Jan 10 '16 at 19:45

score 8 · Answer 2 · edited Jul 23 '14 at 11:19

8

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

edited Jul 23 '14 at 11:19

bukart

4,906
2
21
40

answered Jul 23 '14 at 10:57

score 3 · Answer 3 · answered Oct 07 '15 at 13:00

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

score 3 · Answer 4 · answered Mar 20 '16 at 09:31

3

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

answered Mar 20 '16 at 09:31

Ronald Veenbrink

31
2

score 1 · Answer 5 · answered Sep 13 '13 at 13:18

1

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

answered Sep 13 '13 at 13:18

Frank Lämmer

2,165
19
26

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! – Davor Sep 14 '13 at 12:56

score 1 · Answer 6 · edited Apr 30 '16 at 01:26

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.

score 1 · Answer 7 · answered Sep 28 '16 at 13:21

1

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

Works well :)

answered Sep 28 '16 at 13:21

listenlight

654
1
12
27

Camel · Answer 8 · 2016-12-31T10:57:11.977

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

score 0 · Answer 9 · answered Apr 02 '16 at 07:02

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

Bootstrap 3.0 affix with list changes width

9 Answers9

Linked