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.

Sign up for GitHub

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

Jump to bottom

Support flexible overlay size with connected position strategy #6534

Closed
jelbourn opened this issue Aug 17, 2017 · 5 comments · Fixed by #9153
Closed

Support flexible overlay size with connected position strategy #6534

jelbourn opened this issue Aug 17, 2017 · 5 comments · Fixed by #9153
Assignees
@jelbourn @crisbeto
Labels
P2 The issue is important to a large percentage of users, with a workaround

Comments

@jelbourn
Copy link
Member

This issue tracks the high-level feature of supporting overlays that are automatically an appropriate size based on their position and viewport bounds. This is accomplished by creating a bounding container element that constrains the size of the overlay panel.

In-progress work is: https://github.com/jelbourn/material2/blob/better-connected-position/src/lib/core/overlay/position/better-connected-position-strategy.ts
@jelbourn jelbourn added the P2 The issue is important to a large percentage of users, with a workaround label Aug 17, 2017
@jelbourn jelbourn self-assigned this Aug 17, 2017
This was referenced Aug 17, 2017
Closed
Closed
@jelbourn jelbourn mentioned this issue Aug 29, 2017
Closed
@josephperrott josephperrott mentioned this issue Sep 26, 2017
Closed
@jelbourn jelbourn mentioned this issue Oct 25, 2017
Closed
@isaacplmann isaacplmann mentioned this issue Oct 30, 2017
Open
@jelbourn jelbourn mentioned this issue Nov 10, 2017
Merged
@willshowell
Copy link
Contributor

As a reminder from #8280 (comment), it would be great if whatever api is exposed for "position changes" emits on actual changes (instead of all position events) and within the ng zone.

@jelbourn jelbourn mentioned this issue Nov 15, 2017
Closed
@isaacplmann
Copy link

Is there work behind the scenes being done on this? Or is this something that would benefit from someone writing a PR?

@jelbourn, it looks like you've already put some thought into how to solve this. What is still left to be done?

@crisbeto
Copy link
Member

The work is close to being finished @isaacplmann.

@isaacplmann
Copy link

@crisbeto Great! Glad to hear it. Thanks for the hard work.

crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 28, 2017
@crisbeto
feat(overlay): add support for flexible connected positioning
4b04504 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
@crisbeto crisbeto mentioned this issue Dec 28, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 28, 2017
@crisbeto
feat(overlay): add support for flexible connected positioning
578f5f4 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 13, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
d70be08 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 13, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
ffe7f09 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
jelbourn pushed a commit that referenced this issue Jan 16, 2018
@crisbeto @jelbourn
feat(overlay): add support for flexible connected positioning
7bab334 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes #6534.
Fixes #2725.
Fixes #5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 17, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
1b61bd8 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 18, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
541684a 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 20, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
3726d81 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 22, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
63deb95 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 8, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
65b76cb 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 14, 2018
@crisbeto
feat(overlay): add support for flexible connected positioning
3a9965c 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
mmalerba pushed a commit that referenced this issue Mar 14, 2018
@crisbeto @mmalerba
feat(overlay): add support for flexible connected positioning (#9153)
27e5f6e 
* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes #6534.
Fixes #2725.
Fixes #5267.
josephperrott pushed a commit to josephperrott/components that referenced this issue Mar 19, 2018
@crisbeto @josephperrott
feat(overlay): add support for flexible connected positioning (angula…
27b8f4e 
…r#9153)

* Adds the `FlexibleConnectedPositionStrategy` that builds on top of the `ConnectedPositionStrategy` adds the following:
  * The ability to have overlays with flexible sizing.
  * Being able to push overlays into the viewport if they don't fit.
  * Having a margin between the overlay and the viewport edge.
  * Being able to assign weights to the overlay positions.
* Refactors the `ConnectedPositionStrategy` to use the `FlexibleConnectedPositionStrategy` in order to avoid breaking API changes.
* Switches all of the components to the new position strategy.
* Adds an API to the `OverlayRef` that allows for the consumer to wrap the pane in a div. This is a common requirement between the `GlobalPositionStrategy` and the `FlexibleConnectedPositionStrategy`, and it's easier to keep track of the elements when the attaching and detaching is done in the `OverlayRef`.

Fixes angular#6534.
Fixes angular#2725.
Fixes angular#5267.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jelbourn jelbourn

@crisbeto crisbeto

Labels
P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(overlay): add support for flexible connected positioning crisbeto/material2
4 participants
@jelbourn @isaacplmann @crisbeto @willshowell