Open jgodi opened 6 years ago
@jgodi For a quick fix, you can do the following in your trigger directive: this._overlayRef.hostElement.style.zoom = "0.9"
However this brings me the question what the expected behavior actually is. Should the overlay only position correctly or should it also be zoomed accordingly when it is within the zoomed parent?
@pfeigl I face a similar problem but the solution I need is to position the overlay correctly as original. I am using mat-select and the mat-options are displayed incorrectly after zoom. As we take this example setting zoom to overlayref reduces size but position is incorrect.
Yes I had the same issue. I want to use zoom property in different devices but the mat-select dropdown is not taking right position. Should be solved. But mat-autocomplete is working fine that do not have transform property and animation. Can't we use the same?
It's angular material ver 10 now and this issue is still open!
Any news?
Any updates?
Need help...
Also being impacted by this at the moment.
Same problem today
This is also an issue for us. An area with css zoom applied doesn't work with: OverlayRef, MatTooltip, CdkDragDrop...
Use ::ng-deep in your component.css to override the default styles. ::ng-deep .cdk-overlay-container { / Do you changes here /
}
any update or potential workaround? Scaling the overlay container down doesn't fix the positioning issue
Any update on this?
Bug, feature request, or proposal:
If you are using the
zoom
CSS property to scale down UI elements the positioning of the CDK Overlay are calculated incorrectly.What is the expected behavior?
Overlay positions properly as the non-zoomed styled
div
What is the current behavior?
Overlay positions are calculated incorrectly when the
zoom: 0.9
css property is on the parent container.What are the steps to reproduce?
https://stackblitz.com/edit/cdk-overlay-zoom
What is the use-case or motivation for changing an existing behavior?
We have a Chrome only application that we use the
zoom
css property to scale down the UI. Using other methods of scaling does not work, so this is what we have to do.Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular - 5.2.10 CDK - 5.2.5