Auto-positioning the drop within the bounds of another element

[dandv]

Any chance to include auto positioning (as described in #16) as an option?

I'm looking to improve our selection menu library to always keep the menu within the parent container. This doesn't seem possible if one of the 12 positions must be specified. On the other hand, with position: 'bottom left', the drop-theme-arrows theme somehow switches the position of the arrow between bottom-left and top-left.

How does it do that, and how would one make it switch to other positions, so that the menu stays within the bounds of the target's parent? (the target here is an invisible span created after the selection range)

[geekjuice]

Any chance to include auto positioning (as described in #16) as an option?

Absolutely, once the PR author updates the PR or gives us the okay to update it for him and have it merged.

How does it do that, and how would one make it switch to other positions, so that the menu stays within the bounds of the target's parent?

I would take a look at the constraints options in tether for the various options that are currently supported. Drop does have a constrainToWindow and constrainToScrollParent options, but you can use tetherOptions to get more granular in the constrains you want. Once the above mentioned PR is merged, we'll be able to incrementally constrain the tether elements as well so it does just flip completely from top/bottom or left/right.

[dandv]

@geekjuice: Does @markalfred's final patch to Tether that enables this auto-positioning consist only of these changes? Maybe that's simple enough to integrate in the new, non-Coffee-based Tether?

EDIT: https://github.com/HubSpot/tether/tree/horizontal-overflow-fix ?

[hisnameisjimmy]

Any update on this? Auto-positioning would be great.

[josephrocca]

Wasn't the whole point of tether/drop that it stops dropdowns/toolips from going out of view? Just trying this library for the first time and am amazed that everythings going off the side of the screen. Maybe I've misunderstood the purpose of these libs?

[TrevorBurnham]

@josephrocca By default, Tether just keeps the tethered element attached to its target, which means it is allowed to go out of view. To keep things from leaving boundaries, you need to add constraints. See http://tether.io/#constraints

[josephrocca]

Ah okay, thanks. But we are still waiting for the ability to keep the Drops within the bounds of the window (horisontally-speaking), right? I was unable to get it to do that and it seems like other people are having the same problem. Cheers

Edit (15/3/17): For future searchers, see my comment here for solutions to this.