Random movement of a well with Bootstrap affix with Aurelia

Question

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

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.

https://gist.run/?id=8d39f6f5a49d42ae6997905058f60419 I changed the attribute to have a custom naming convention: myCustomAttr = mca — , Sep 07 '16 at 15:47
@Knostradamus while that does stop the funny glitching, it doesn't affix correctly like the codepen example. — Kevin Vasko, Sep 07 '16 at 15:55
I don't think I understand the question. Are you using bootstraps' Affix plugin? http://getbootstrap.com/javascript/ => Are you trying to figure out why affix is breaking the UI or just trying to get it to work? I'm not sure Aurelia is at fault. — , Sep 07 '16 at 16:04
I want this functionality http://codepen.io/anon/pen/ozgAyE to work within the context of the Aurelia application (the Bootstrap affix on the well, scroll down, it doesn't move). It might not be Aurelia directly, but maybe indirectly? From my perspective, I see code without Aurelia working, when I introduce the same exact code within Aurelia the code stops working. — Kevin Vasko, Sep 07 '16 at 16:12

score 1 · Accepted Answer · 2016-09-07T16:45:01.490

1

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!

edited Sep 07 '16 at 16:45

answered Sep 07 '16 at 16:21

Thanks but if this is what you mean, it still doesn't seem to work. https://gist.run/?id=1e7e3c2b320851f0922ada4502f215a7 – Kevin Vasko Sep 07 '16 at 16:24
I've edited my answer. Sorry for the confusion and I hope it answers your question. – Sep 07 '16 at 16:44
yup! that fixes it on the gist.run! Doesn't seem to work on my local Aurelia app for some reason (go figure) but does work on the gist.run sandbox so there is something else wrong. Thanks! – Kevin Vasko Sep 07 '16 at 16:48
happy to help. I believe this to be a bug in the affix plugin. I could be wrong but if my foggy memory is correct, many people having this issue. – Sep 07 '16 at 16:52
Sorry, which issue specifically? Having to provide the affix code in the attached? – Kevin Vasko Sep 07 '16 at 16:53
the issue when you click on the affix elem and it triggers offset – Sep 07 '16 at 16:54

Random movement of a well with Bootstrap affix with Aurelia

1 Answers1