Bootstrap 3RC1 + Side Panel + Affix

Question

Can anyone help me implementing a lateral panel that stays visible when scrolling the page using Bootstrap v3 RC1?

This is my code Bootply.

My problem is that when I scroll down the page the panel shrinks, and I want it to keep the size when the page is on top. If I write and style for affix (.affix{width:10%}) I can set the width. However if I do it this way then I'll have to put the exact size for the panel.

Is this the right approach?

score 2 · Answer 1 · edited May 23 '17 at 10:25

The affix plugin sets different classes for your element based on scroll position (and offset). Before the offset this class will be affix-top, between affix-offset-top and affix-offset-bottom this class will be affix. The position defined by css for affix-top will be static (default, also see: http://www.w3schools.com/cssref/pr_class_position.asp) while the position of the affix class is set to fixed.

When a element has position:absolute it's width is max the width of it's parent. So in your case your panel get 100% width of the col-lg-3 (due to the box-sizing: border-box, see Why did Bootstrap 3 switch to box-sizing: border-box? ). The width of this class will 25% (3/12*100) parent .container div. The (max-)width of the .container depends on the screen / viewport's width.

The affix class with position:fixed don't have a parent container. So 100% width of this element will be 100% of the viewport minus the left position of the element (100% of the available space).

When changing the viewport, the width of the .container is fixed between the boundaries of the grid (see: http://getbootstrap.com/css/#overview-container). So the size of your affix-top will be fixed between this boundaries. Always 25% of the .container. Set the .affix class also to 25% it's size will varies fluid. Cause 25% of the viewport (minus the left) mostly not equals 25% of the container your affixed element will have a different width with class .affix.

For the reason mentioned above the width of the affixed element is mostly set fixed to a value in pixels. For an example see the docs on http://getbootstrap.com/.

The best way to varies the width of your side panel depending on screen width (make it responsive) will be widths in pixels in combination with media queries.

Example:

/* Extra small devices (phones, up to 480px) */
/* No media query there is no affix */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { #side-panel { width: 152px; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { #side-panel { width: 208px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { #side-panel { width: 270px; } }

See: http://bootply.com/82661 (note i adopt your code for Bootstrap 3.0.0.)

Alternative set the width with jQuery: This shows the width depends on the .container, but prefer the css solution above.

$(document).scroll(function(){
    $('.panel.affix').width(((($('.container').width()+30)/4)-30));
})

In this example i suppose you divided the `.container` width by `4` because the panel that should be fixed was `col-lg-3`. Now i tried to fix a `col-lg-9` with this code: `$('.col-lg-9').width((((($('.container').width()+30)/4) * 3)-30));` but how you can imagine this gives me not the right dimensions! The `col-lg-9` stays a little bit to wide! How can i fix this? What code would you use? Thanks — John Smith, Feb 14 '14 at 11:35
use in that case `$(document).scroll(function(){ $('.panel.affix').width(((($('.container').width()+30)*0.75)-30)); })` where 0.75 = 9 / 12 — Bass Jobsen, Feb 14 '14 at 13:10
Thanks! Maybe you can help me with this one : http://stackoverflow.com/questions/21782325/hide-text-that-is-scrolled-behind-input — John Smith, Feb 14 '14 at 14:45

score 0 · Answer 2 · edited Jan 31 '14 at 23:27

In Bootstraps CSS for the class="panel" it will automatically apply

.panel {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

Try adding a width:270px to the .panel CSS.

So it will look like this afterwards

.panel {
    width: 270px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

Hopefully that should fix your issue.

Bootstrap 3RC1 + Side Panel + Affix

2 Answers2

Linked