Kevin Vasko Kevin Vasko - 3 months ago 11
jQuery Question

Random movement of a well with Bootstrap affix with Aurelia

I am trying to get a well to affix to the correct location. I got a codepen sample of it working without issue.

http://codepen.io/anon/pen/Egaqxb

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

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




.affix {
top: 0;
}

.affix-top {
display:inline-block
}

.affix-bottom {
position: absolute;
width: 100%;
}


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.

Affix with custom attribute example:
https://gist.run/?id=984dd297691abccca983c995d09ade7a

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:
https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44

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.

Answer

I would stick to the rule that any custom attribute should follow a strict naming convention: My Custom Attribute = mcaThing

But! Now I understand your question (I think) So in your attach() function you may want to place in your jQuery stuff. I'm not sure why it was jumping all over the place but by specifying your offset, you can control the affix().

attached() {
  $(this.element).affix({
    offset: {
      top: 100
    }
  });
}

Hope this helps!