Reposition a center-attached element to left- or right-attached

[markalfred]

Opening this PR to discuss the feasibility and desirability of repositioning center-attached elements if they move outside of their constrainer. This originated in a Drop discussion but the fix here is in Tether.

Example:

If this is a desirable feature, I'd be happy to update the change in order to make it mergeable 👍

[adamschwartz]

👍

[geekjuice]

🍻

[NicBright]

I like this solution as well.

As Tether is no longer CoffeeScript based, the patch just needs some refreshments imho.

[geekjuice]

@markalfred Do you mind if I close this PR in favor of https://github.com/HubSpot/tether/compare/horizontal-overflow-fix. This is a great feature we would love to incorporate into Tether and the branch has your changes applied to the new project structure.

[markalfred]

👍 Sorry for falling off the face of the earth. I ran into some problems trying to implement the same functionality on a middle (y) position element and never revisited. The above fix looks great, thanks for this!

[yairEO]

whats up with this? is it in or not? I didn't understand @geekjuice 's comment

[geekjuice]

I've been busier than expected these past few months and haven't had the bandwidth to fully test these changes and merge them into master. As of now, the changes are still only on the branch (which can be pulled down if you need them right away).

My comment was that the changes on this branch were applied before a large project restructuring (when the project still used coffeescript), so there would have been major merge conflicts. The branch I mentioned above ported these changes into the new project format (using ES6).

If you'd like to help get this into master sooner, I'd be more than grateful if you'd like to pull down the branch above and help make sure nothing is broken by the changes.

[yairEO]

@geekjuice :
I've updated to the latest version 1.2.0 and used these settings:

attachment: 'top center',
targetAttachment: 'middle center'
constraints: [{
    to: 'window',
    attachment: 'together element'
}] 

And I have this bug, when re-sizing the window (FF 44.0.2 & Chrome 48.0.2564.116 on Win7), the tether element "jumps" (it should be attached to the "star" icon:

[geekjuice]

@yairEO do you mind setting up a simple jsbin/fiddle/codepen reproducing the issue and providing the link? Then I'll be happy to take a look.

[yairEO]

I'll set it up

[yairEO]

@geekjuice - I've produces a simple example page (using latest (1.2.0):

Try resizing the output area

seems like tether goes crazy when the target element has float:right. (other properties might also cause this)