Twitter Bootstrap affix element width rolling out from parent element borders

Question

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!

score 1 · Answer 1 · answered Sep 06 '18 at 21:59

Check the doc: http://bootstrapdocs.com/v3.2.0/docs/javascript/#affix

You can listen for the affixed.bs.affix event and then detect the scrollspy parent's width and then set the scrollspy to match this width.

Here is my solution.

  $("#scroll-spy").on('affixed.bs.affix', function(e) {
    var wrapper = $("#scroll-spy-wrapper");
    var scrollSpy = $("#scroll-spy");

    scrollSpy.width(wrapper.width());
  });

score 0 · Accepted Answer · answered Mar 17 '16 at 14:59

0

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

answered Mar 17 '16 at 14:59

Carol Skelly

351,302
90
710
624

@ Skelly Thx for reply, but i mean that affix panel after scroll still stay in border of parent panel. I wrote JS code exactly to set affix panel width (i don`t like css - joke). But in your example affix panel width will set in 100% of screen, i want that affix panel stay in border of parent panel. – Doom Mar 18 '16 at 08:39

score -1 · Answer 3 · answered Mar 18 '16 at 10:03

-1

Solve problem by calculating window\element sizes and set width in appropriate percent.

answered Mar 18 '16 at 10:03

Doom

133
1
9

Twitter Bootstrap affix element width rolling out from parent element borders

3 Answers3