search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.72k forks source link

CDK Overlay - Position Strategy with zoom css on parent #10924

Open jgodi opened 6 years ago

jgodi commented 6 years ago

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

pfeigl commented 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?

Harikumar-Shankar commented 6 years ago

@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.

baljinderkaur commented 4 years ago

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?

ThisIsArnab commented 4 years ago

It's angular material ver 10 now and this issue is still open!

kimuradev commented 2 years ago

Any news?

Fomicha commented 2 years ago

Any updates?

louisljw commented 1 year ago

Need help...

CraigA-ZA commented 1 year ago

Also being impacted by this at the moment.

lucianconst commented 1 year ago

Same problem today

joewIST commented 10 months ago

This is also an issue for us. An area with css zoom applied doesn't work with: OverlayRef, MatTooltip, CdkDragDrop...

BGSilviu commented 10 months ago

Use ::ng-deep in your component.css to override the default styles. ::ng-deep .cdk-overlay-container { / Do you changes here /

}

StevenSwitten commented 3 months ago

any update or potential workaround? Scaling the overlay container down doesn't fix the positioning issue

Khumozin commented 1 week ago

Any update on this?