Positioning Off Screen

[jgadbois]

I'm using Drop version 1.2.3 ("tether-drop": "~1.2.3",) with Ember. My drop is positioning at the very top of the window.

Initialized with the following code

    let dropInstance = new Drop({
      target: this.$()[0],
      content: this.$('.drop-contents').html(),
      classes: 'drop-theme-arrows-bounce',
      position: 'bottom left',
      openOn: 'click'
    });

Markup in inspector

<span id="ember919" class="ember-view drop-theme-arrows-bounce drop-target drop-enabled drop-pinned drop-pinned-bottom drop-element-attached-left drop-target-attached-left">aggregate stats
<div class="drop-contents hidden">
   Tooltip
</div>
</span>

And here's the behavior:

[zackbloom]

Can you confirm that the element you're passing to Drop is the same element as is on the screen later on?

On Wed, Nov 4, 2015 at 8:39 AM, John Gadbois notifications@github.com wrote:

I'm using Drop version 1.2.3 ("tether-drop": "~1.2.3",) with Ember. My drop is positioning at the very top of the window.

Initialized with the following code

let dropInstance = new Drop({
  target: this.$()[0],
  content: this.$('.drop-contents').html(),
  classes: 'drop-theme-arrows-bounce',
  position: 'bottom left',
  openOn: 'click'
});

Markup in inspector

aggregate stats

Tooltip

And here's the behavior:

https://camo.githubusercontent.com/ccf8b9539e1c52a0a4d265e1f3f4e0fcb2c729bb/687474703a2f2f636f6e74656e742e73637265656e636173742e636f6d2f75736572732f6a676164626f69732f666f6c646572732f4a696e672f6d656469612f31363936343562352d376638362d343765302d396266332d3566636437323061626161622f30303030303535302e706e67

— Reply to this email directly or view it on GitHub https://github.com/HubSpot/drop/issues/121.

[jgadbois]

I guess Ember could be tearing it down and putting a new element in there. I can't tell for sure. The $.offset() has changed for sure.

[jgadbois]

Actually this is still happening even with a ember plugin that wraps drop, but it does work on another page. Are there css styles or other problems that could break the positioning algorithm?

[zackbloom]

You could console.log the element you pass into Eager, and then right click it and select "Reveal in Elements Panel". If the element doesn't match the one on the screen, it's swapping it out.

On Wed, Nov 4, 2015 at 2:11 PM, John Gadbois notifications@github.com wrote:

Actually this is still happening even with a ember plugin that wraps drop, but it does work on another page. Are there css styles or other problems that could break the positioning algorithm?

— Reply to this email directly or view it on GitHub https://github.com/HubSpot/drop/issues/121#issuecomment-153833991.

[chenasraf]

Happens to me too. I have a table with rows that have a hover drop - After the first 5-6 rows in the table, the drop stops following the Y axis and freezes at 666px on translateY (creepy, right?!), never going beyond that. The X axis follows properly. Other than background/tip color, I didn't do anything unique with the CSS of the drop. I even tried it with default options.

Here's an example: