Random movement of a well with Bootstrap affix with Aurelia
<p>I am trying to get a well to affix to the correct location. I got a codepen sample of it working without issue.</p>

<p><a href="http://codepen.io/anon/pen/Egaqxb" rel="nofollow">http://codepen.io/anon/pen/Egaqxb</a></p>

<p>bootstrap.css, bootstrap.js and jQuery were added as library dependencies to the above codepen.</p>

<pre><code>&lt;div class="container-fluid"&gt;
&lt;div class="row"&gt;
    &lt;div class="col-md-2"&gt;
        &lt;!-- selection menu bar --&gt;
        &lt;div class="well well-lg" data-spy="affix"&gt;
            &lt;!-- Selection "Program" --&gt;
            &lt;div class="form-element"&gt;
                &lt;label for="ln"&gt;Program&lt;/label&gt;
                &lt;form&gt;
                    &lt;div class="form-group"&gt;
                        &lt;select class="form-control"&gt;
                            &lt;option&gt;Select a Program&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-10"&gt;
        &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
      &lt;p&gt; testdsafjsdlkfjslk&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<pre><code>.affix {
  top: 0;
}

.affix-top {
  display:inline-block
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}
</code></pre>

<p>I was having some problem with getting it to work within Aurelia and someone helped me produce the following gist.run. It works to a certain degree, the display is slightly different (even though the HTML code is exactly the same) and a weird anomaly is that when you click on the well, it moves on the screen for some reason. It is hard for me to believe that bootstrap is causing it since it works without Aurelia.</p>

<p>Affix with custom attribute example:
<a href="https://gist.run/?id=984dd297691abccca983c995d09ade7a" rel="nofollow">https://gist.run/?id=984dd297691abccca983c995d09ade7a</a></p>

<p>Oddly enough if I don't use a custom attribute and simply put the stuff in the attached(), I still have the display issues that is different but clicking on the well doesn't cause it to jump around on the screen.
Affix without custom attribute example:
<a href="https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44" rel="nofollow">https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44</a></p>

<p>This leads me to believe that Aurelia is doing something odd in the background that I'm unaware of that I can't seem to track down to a root cause.</p>