Bootstrap Affix plugin with fluid layout

Question

If I would like to use the affix plugin for sidebar in fluid layout but the width of the sidebar always change when it is affixed and the responsive design don't work too.

In the Bootstrap documentation the affix plugin is not used with fluid layout. Maybe because they have the same problem.

Does anybody know how to make it work?

score 26 · Accepted Answer · answered Jun 21 '13 at 20:25

For affix to work with a fluid span3 sidebar, you'll need to add some javascript to clamp the width and manage resizes.

I just wrote a little javascript function to make this work.

Check out this bug from bootstrap.

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});

elegant solution, getting.container in bootstrap3, give you the ability to have nice affixed stacked navbar — Jean-Christophe Meillaud, Nov 11 '13 at 17:12
You might want to watch out for `box-model` declarations here — Eric, Mar 18 '14 at 19:22

score 4 · Answer 2 · answered Sep 21 '12 at 20:02

4

The affixed demo on their website is responsive, it positions itself on the top of the page as expected. The position:fixed CSS property in mobile devices and on smaller screens is not a viable option so that functionality is removed.

answered Sep 21 '12 at 20:02

Andres I Perez

75,075
21
157
138

1

Thank You for your answer. Yes the demo is responsive, but not with fluid grid system. And there is the problem. – Toki Sep 26 '12 at 12:43
@Toki totally forgot this question, only noticed your reply after a downvote :/ ... tested the bootstrap affix plugin with a fluid setup and it appears to be working fine with the latest bootstrap, which I'm guessing was an issue they fixed. Here is a demo: http://jsbin.com/urinum/1 – Andres I Perez Dec 11 '12 at 20:56
@Andres-ilich: The demo you point to includes assets/css/docs.css, which has specific tailoring for various devices. See below ` (at)media (max-width: 767px) { .bs-docs-sidenav.affix { position: static; width: auto; top: 0; } ` – Diomidis Spinellis Mar 23 '13 at 09:33
@DiomidisSpinellis at the time of writing, I don't remember if the bootstrap had those styles. The framework has gone through quite a few changes and updates since the question was asked. – Andres I Perez Mar 24 '13 at 02:04

score 1 · Answer 3 · answered Dec 31 '12 at 02:53

1

You have to explicitly set the width property (or min-width) for the sidebar. If you look at the page Andres pointed to, the class "bs-docs-sidenav" has an explicit width of 228px.

This overrides the ".span3" class and prevents the sidebar from resizing as you scroll.

If you remove that explicit width declaration and scroll the page the sidebar resizes just like the problem you're seeing in your own page.

answered Dec 31 '12 at 02:53

Mike

59
1
4

7

But with a fixed-width it is not fluid anymore. – SPIELER Mar 04 '13 at 10:20

score 1 · Answer 4 · edited Aug 08 '13 at 14:30

$(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

where your page is like:

<div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>

Bootstrap Affix plugin with fluid layout

4 Answers4