CDK overlay auto calculate width when using ConnectedPositionStrategy
See original GitHub issueBug, feature request, or proposal:
Feature
What is the expected behavior?
That i can somehow configure the popup overlay to change it width to be the same as the parent, without having to add a bunch of custom styling to my popup component.
What is the current behavior?
What is the use-case or motivation for changing an existing behavior?
I would have to do less custom styling to get a nice dropdown
Is there anything else we should know?
In the screenshots we have changed the width using css, however this is suboptimal to having a responsive design, where the input can change their width all the time. To get around the problem we have to hard-code the width of both the input and the popups, so they look to fit together.
My best suggestion would be able to do something like this:
this.overlay.position()
.connectedTo(target, {
originY: 'bottom',
originX: 'start'
}, {
overlayY: 'top',
overlayX: 'start'
})
.immitateWidth();
Issue Analytics
- State:
- Created 6 years ago
- Reactions:15
- Comments:10 (2 by maintainers)
Top Results From Across the Web
Overlay | Angular Material
Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building block for other components. Dialogs, tooltips, menus,...
Read more >How do I configure a material cdk overlay position strategy ...
I solved the above problem, by implementing a check - after the dialog is opened. This is done with the resize-observer.
Read more >Custom Overlays with Angular's CDK - Thoughtram Blog
In this post, we'll use the CDK to build a custom overlay that looks and ... How do we get the best of...
Read more >Angular Overlay Service - Positioning Strategies - Infragistics
After flipped, if the element is still out of the viewport, Auto will use the ... (re-calculating width and/or height) in case the...
Read more >Angular Cdk Overlay: Make Overlay Add To The Height
CDK overlay panel should get inline width and height properties defined by ... CDK overlay auto calculate width when using ConnectedPositionStrategy #10393.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hello, I have created a loading spinner overlay and encountered the same issues. I wanted the spinner to have exactly the same width and height of another component to display a transparent backdrop. The main issue was that overlay position and size were not updated when the target element was resize (for example, when the sidenav was toggled). It is because overlay position is updated only when window is resized (see ViewportRuler).
I found out a solution but not sure it’s working correctly among all browsers and for server side rendering. Suggestions are welcomed!
First, I have created a service to create watcher on element size:
Then, I use the
change
observable in my overlay service:I took a page out of angular material’s book to overcome this.
https://github.com/angular/components/tree/master/src/material/select
Seems to work well for my purposes. Idk, helped me - maybe it’ll help someone else.