[Solved] CSS zoom support with popup components

[Monja]

Hi,

I'm using the CSS zoom property to scale my website and initially noticed that popup-based Telerik components (e.g. DropDownList) were misaligned.

After some investigation, I found that this happens when the zoom is applied to a root element that also contains the animation containers. The issue can be worked around by explicitly excluding .k-animation-container from the zoom and explicitly applying the zoom property to its child animation containers (.k-child-animation-container). After doing that, popup positioning appears correct again and content and popup contents are scaled correctly.

Given that zoom is supported by all major browsers according to Can I Use (https://caniuse.com/css-zoom), I'm wondering:

• Is CSS zoom officially supported by Telerik UI for Blazor?
• Is the need to handle .k-animation-container and its child contents separately expected behavior, or is there a better, recommended approach?

Thanks!

[Dimo]

Hello Monja,

Indeed, currently we do not take into account CSS zoom styles for our popup positioning. Sorry about that. We have a relevant feature request that you can follow. I already voted on your behalf:

Popup position with different zoom levels

Regards,
Dimo
Progress Telerik