Element renders off-screen for mobile

[Nick Restrepo]

When I use the drop as a tooltip in a form, it breaks when the screen is reduced to mobile screen width at 320px.

Please see the screenshot here:

Shouldn't it move to the left a little to stay within the viewport? It's currently push the page width out:

How do I fix this?

Here is the code:

<a class="drop-target drop-target-example-drop-theme-arrows-bounce-dark ss-help"></a>

var drop = new Drop({
   target: document.querySelector('.drop-target'),
   classes: 'drop-theme-arrows-bounce-dark',
   openOn: 'click',
   content: this.content,
   position: 'top center',
   constrainToWindow: true,
   constrainToScrollParent: false
});

[jmsfcb]

Bump

[josephrocca]

It's been nearly a year since #100 and about 3 years since #16. Do you know if hubspot has abandoned this lib @geekjuice?

Edit: In the meantime, @streamside posted this in #16 - I've just tested and it seems to work great (after editing it slightly):

// Create the drop and register subscription to open event
let drop = new Drop(options);
drop.on('open', function() { positionDrop(drop); });

// Ensures drop is horizontally within viewport (vertical is already solved by drop.js).
function positionDrop(drop) {
    var rect = drop.drop.getBoundingClientRect();
    if(rect.left >= 0 && rect.right <= window.innerWidth) { return; }

    var dropWidth = drop.drop.getBoundingClientRect().width,
        left = drop.target.getBoundingClientRect().left,
        right = window.innerWidth - left,
        direction = dropWidth > right ? 'right' : 'left';

    drop.tether.attachment.left = direction;
    drop.tether.targetAttachment.left = direction;
    drop.position();
}

(Edit) Even better:

I just upgraded tether.js to 1.3.3 and drop.js to 1.4.2 and used these options:

      tetherOptions: {
        attachment: 'top center',
        targetAttachment: 'bottom center',
        constraints: [
          {
            to: 'scrollParent',
            pin:true
          }
        ]
      },

And it seems to work really nicely (previous solution was a bit hit and miss).

[Deleted user]

@josephrocca seeing the way they're greenkeeping I'd say yes, HubSpot has abandoned this library, at least from an OSS-support perspective.

[André Werlang]

@josephrocca thanks, it worked:

      tetherOptions: {
        attachment: 'top center',
        targetAttachment: 'bottom center',
        constraints: [
          {
            to: 'scrollParent',
          }
        ]
      },