Tell liquid-tether that modal content width has changed

[lolmaus]

Hi!

After a modal is displayed, its content can become wider (as a response to user action).

The modal then becomes misaligned.

At the end of the user's action, I would like to notify liquid-tether that it should recalculate modal size and alignment. How do I do that?

PS When I scroll the page, the modal does realign. I tried doing $(window).resize() but it didn't help.

[pzuraq]

This is definitely an issue with Tether.js itself. It isn't able to detect these changes until you scroll (it listens for that event) and then it recalculates.

I think one way we could solve the issue is by adding a hook to listen for changes in size, maybe something like:

{{liquid-tether to="my-target" as |sizeDidChange|}}
...
{{/liquid-tether}}

[lolmaus]

Is there a way to trigger the scroll event for Tether.js to react to?

[lukeclewlow]

Can call Tether.position() which will reposition all tethered elements. http://github.hubspot.com/tether/overview/repositioning/

[lolmaus]

@lukeclewlow Thx, that seems to be exactly what I need! 🙇

How do I access Tether? Can I import it instead of using a global?

PS You can use "Close and comment" when answering.

[lukeclewlow]

I'm not too sure on how to import instead of using a global, was just having the same problem and stumbled across that in Tether docs. Let me know if you find a good way though. I found I also had to wrap it in an Ember.run.later to make it work.

[lukeclewlow]

It is also a jump, and I would like the repositioning to be an animation. Is there any way to animate the repositioning?

[pzuraq]

@lukeclewlow you could potentially animate between modal states using different modals entirely (check the fly-to examples), or if that won't suite your needs you could also drop liquid-tether and just use a liquid-wormhole. For modals it can be enough if all you need is the modal to be horizontally centered.

Importing Tether.js isn't really a possibility right now, but I'm looking into it for fastboot compatiility as well. The way they package it, it can define itself as a module if it uses AMD, but we don't technically so it's a little weird. Might be able to hack it in.

[lukeclewlow]

@pzuraq that seems to work great, have used your fly-to example but just kept attachment and targetAttachment consistent! thanks for your help!

[pzuraq]

@lukeclewlow Awesome! 😄

I'm going to close this issue for now, since there are ways to solve it using the global Tether object and using fly-to animations and multiple modals. When I get to the refactor for Fastboot, I'll revisit this and figure out a way to trigger the change event without a global Tether object.

[lolmaus]

Two years later, I need this again. Is conveniently accessing Tether.position() without /* global Tether */ still unavailable in the addon?

Please reopen.

[pzuraq]

open to suggestions for solving this, I think the simplest path forward would be wrapping the Tether global in a module: import Tether from 'tether';