csstwitter-bootstrapaffix

Twitter Bootstrap affix element width rolling out from parent element borders

I create an panel element and inside his body put another panel element. Than i put to this "inside-panel" an affix plugin and when i scroll down page my "inside-panel" changing size and it not look nice. I wrote an example and put on bootply to show how it look like. bootply example I try to fix width with JS code:

    var sz = $('.affix').width();
    $(window).scroll(function () {
            $('.affix').width(sz);
    });

But no sense. Please tell me how to fix "inside-panel" width and in perfect still stay an responsive. Thank you!

Solution

  • As stated in the docs..

    "you must provide CSS for the positioning and width of your affixed content"

    Of course, it all depends on what you think "look nice". Here's an example forked from you Bootstrap. Notice the #myAffix.affix CSS used to control the position of your panel.

    http://bootply.com/RUiDxG0OqI