Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose FlexibleConnectedPositionStrategy.apply() #172

Open
julianobrasil opened this issue Aug 25, 2019 · 1 comment
Open

Expose FlexibleConnectedPositionStrategy.apply() #172

julianobrasil opened this issue Aug 25, 2019 · 1 comment

Comments

@julianobrasil
Copy link
Contributor

julianobrasil commented Aug 25, 2019

If the popover's content gets a bigger height than that of when it was opened, it may extend beyond the viewport limits (demo link on the end of this issue description).

popover.realign() method fires FlexibleConnectedPositionStrategy.reapplyLastPosition();, which just reapply the last calculated position, not really realigning the popover in the situation described above.

There should be a way of calling FlexibleConnectedPositionStrategy.apply() instead. There are some options to fix this without inserting a breaking change (I'm not sure whether any of them is desired):

1 - passing an optional argument to realign:

popover.realign(reapplyPositionStrategy = false) {
 ...
}

2 - creating a new method on SatPopover (one more thing to the public API):

popover.recalculateAlignment() {
 ...
}

Without this API, the following situation has to be fixed by accessing the non-public API:

popoverIssue

Which can be fixed by accessing the private API:

if (this.listVisible && satPopover['_anchoringService']['_overlayRef']) {
  const config =
  satPopover['_anchoringService']['_overlayRef']
    .getConfig();
  const strategy =
  config.positionStrategy as FlexibleConnectedPositionStrategy;
  strategy.apply();
}

Stackblitz demo

[UPDATE]: of course it also can be fixed with the current public API by toggling the popover twice inside a setTimeout, but the UX isn't so good with this approach.

@Andrew-Marks-Trisept
Copy link

It looks like your suggestions only fixes the case where the popover grows bigger and is then off the bottom of the screen. It fixes it by adjusting it to position the popover above the anchor instead, which only works if there is enough room at the top of the screen/document.

If the popover is long enough (or becomes long enough) where it won't fit either above or below the anchor, there would still be a problem. See the example linked in #218.

There could be something I'm not thinking about, but for my purposes, I think the ideal solution would be something where the popover opens on the desired side, if it fits. Then if it doesn't, it opens on the other side. Then if it doesn't fit on either side, it chooses the side that's larger and constricts itself to a size that fits between the anchor and the edge of the screen, scrolling within the popover as needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants