Always fit within viewport, in secondary dimension?

[henrik]

If a Drop.js is set to appear below an element, the constrainToWindow: true option will make it appear above the element instead if necessary to fit inside the viewport.

But if the horisontal center of the anchor point of the Drop is close to the left or right edge of the window, it may go outside the window horisontally as seen here:

Is there any built-in way to fix that issue? Ideally I think it would shift the content to fit the viewport width, but the arrow would stay put, becoming off-centered.

[NicBright]

You can improve the behaviour a little bit with these tetherOptions (if you give constraints in this way, constrainToWindow and constrainToScrollParent will be completely ignored, because the constraints they produce are overwritten)

    tetherOptions: {
        constraints: [{
            to: 'window',
            pin: true,
            attachment: 'together'
        }]
    }

The only downsides to this are:

1. While pinned, you won't have an arrow pointing to your drop target
2. While pinned to the right side of the viewport, an extra ugly horizontal scrollbar is added.

If you plan to open your drops permanently (e.g. via click) and not only while hovering them, you might consider having the pin option set to ['left', 'right'], to prevent the drop from being pinned vertically while scrolling down the page.

[henrik]

@NicBright Oh, excellent! Thank you so much.

[geekjuice]

Seems like a solved issue 👍 If not, feel free to reopen the issue.

[henrik]

Yeah, you can probably consider it solved. Thanks! Would be nice if it had this behavior by default (you probably never want it to not fit within the viewport), but maybe that's tricky.

[geekjuice]

@henrik Actually, there is a potential fix for this coming soon via shipshapecode/tether#81. Is this closer to the type of solution you were looking for where it stays in the viewport?

[henrik]

@geekjuice Yup, that looks like exactly what I was after!

[yairEO]

what fix? there's an "ugly horizontal scrollbar" as @NicBright described. it's a huge show-stopper

[geekjuice]

I think the example in shipshapecode/tether#81 has scroll bars to demonstrate the attachment position adjusting to being close to the edges and repositioning to stay within the view port. In practice, you shouldn't see scroll bars as the entire point is keep the tethered content in the viewport.