title: Using angular-ui-bootstrap and a fixed sidebar
body: <p>I've seen several examples of using bootstrap ScrollSpy / Affix, but I'm having a hard time applying that to angular-ui-bootstrap.  I would like to have a left-sidebar on my UI, that is fixed (it's position remains even when the rest of the page is scrolling).</p>
  
  <p>I have two plnkr's.  One shows a non-fixed (but mostly functional) sidebar, the other shows an ALMOST working fixed sidebar - but the content pushes the width out further than it should.  In the second example, if I could figure out how to constrain the width to the parent width, it would work how I want:</p>
  
  <p>Static sidebar: <a href="http://plnkr.co/edit/A1kyi1?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/A1kyi1?p=preview</a></p>
  
  <p>position:fixed (but width is pushed out too far) sidebar: <a href="http://plnkr.co/edit/R11BFt?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/R11BFt?p=preview</a></p>
  
  <p>Here is the important code:</p>
  
  <pre><code>  &lt;div class="container pull-left"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 col-md-3 sidebar" style="background-color:blue;"&gt;
          &lt;div style="background-color:orange;"&gt;
            Some side bar stuff
            &lt;br /&gt;
            &lt;br /&gt; Some side bar stuff
            &lt;br /&gt;
            &lt;br /&gt; Some side bar stuff
            &lt;br /&gt;
            &lt;br /&gt; Some side bar stuff
            &lt;br /&gt;
            &lt;br /&gt; Some side bar stuff
            &lt;br /&gt;
            &lt;br /&gt; Something that pushes the width out.  Something that pushes the width out....    
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-12 col-md-9" style="background-color:#eeeeee;"&gt;
          &lt;p&gt;The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
            jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
            dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
            fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
            lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
          &lt;/p&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.sidebar &gt; div {  position: fixed; z-index:10000; top:50px;left:0;}
  </code></pre>
  
  <p>Screenshot:<a href="https://i.stack.imgur.com/8qlA1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8qlA1.png" alt="enter image description here"></a></p>
  
  <p>Does anyone know how I can get this working? Thanks</p>