Twitter Bootstrap Question posted in

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Solve problem by calculating windowelement sizes and set width in appropriate percent.


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

    Login or Signup to reply.
  3. 0

    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());
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search