Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CDK Overlay - Position Strategy with zoom css on parent

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:9
Comments:7 (1 by maintainers)

Top GitHub Comments

10reactions

kimuradevcommented, Sep 14, 2021

Any news?

4reactions

ThisIsArnabcommented, Jul 14, 2020

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

Top Results From Across the Web

How do I configure a material cdk overlay position strategy ...

Goal. My objective is to create an overlay with the Angular overlay CDK, that follow these rules: Never position overlay outside the viewport. ......

Overlay | Angular Material

The CDK overlays depend on a small set of structural styles to work correctly. ... There are two position strategies available as part...

Angular — Create your own Overlay with customized position ...

Angular — Create your own Overlay with customized position strategy builder to attach Overlay to any element Disclaimer: This is an article ...

@angular/cdk | Yarn - Package Manager

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The team maintains...

CHANGELOG_ARCHIVE.md - components - Fossies

... @angular/cdk/overlay has a new positioning strategy available, FlexibleConnectedPositionStrategy , which intelligently handles sizing and positioning to ...