Overflow of sidebar with Twitter Bootstrap Affix [closed]

Question

I'm trying to use the affix plugin by twitter bootstrap but I can't figure out how to constrain it within the parent container, i've created the following example to show my problem:

Problem demo: http://www.codeply.com/go/DvcRXkeFZa

<div class="container">
    <div class="row">
        <div class="col-md-3 column">
            <ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
                <li><a href="#software"><b>Software</b></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#benefits">Benefits</a></li>
                <li><a href="#costs">Costs</a></li>
            </ul>
        </div>
        <div class="col-md-9 column">
            <h1>Blah, blah, blah</h1>
            <hr>
            <a class="anchor3" id="top" name="software"></a>
            <p>
             content here that scrolls...
            </p>
        </div>
    </div>
</div>

As you can see when you scroll it overflows out of the sidebar, it also doesn't affix to the bottom of the page when it reaches the bottom.

Primp

down since link is removed/redirects to fansite – Botanical

down since link is removed/redirects to fansite – Hyperkeratosis

A perfect example of why external links aren't a good idea, and the code should always be in the question. – Sim

Answer 1

From the Bootstrap docs (http://getbootstrap.com/2.3.2/javascript.html#affix)..

Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

So you need some CSS for affix to set the width for the element when it becomes fixed. Such as:

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Demo on Bootply: http://bootply.com/73864

Related answers on Bootstrap affix:
How to create a sticky left sidebar menu using bootstrap 3?
Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

Sim

But how would the width work given that bootstrap is supposed to be responsive? Setting it to inherit gives it a width of 20% like the span and 100% makes it cover the whole page? – Primp

@FreezeDriedPop You have to explicitly handle that in your css w/ media queries, by defining the width of the affixed attribute at each breakpoint. Not ideal. I wish you could affix standard columns like this <div class="col-md-3 affix"> and have it automagically affix to whatever size 3 columns represents in any viewport size. – Whoso

Or only apply the affix responsively using media queries: https://mcmap.net/q/1475149/-twitter-bootstrap-3-affixed-sidebar-overlapping-content-when-window-resized-and-also-footer – Sim

Answer 2

In an answer to @FreezeDriedPop I found this to work for me:

var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');

Maize

Also add this to be able to keep the correct size on resize of the window! $( window ).resize(function() { var navbw = $('#sidebar').width(); $('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>'); }); @kurt @Freeze @Skelly – Maize