Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 15 Feb 2021 07:26 by ADMIN
Alexander
Created on: 04 Feb 2021 20:44
Category: KendoReact
Type: Feature Request
0
Please provide the zoom property for all react component or advise a robust way to implement application level zooming (DatePicker/DateInput)

We are implementing the application level zooming.

When user changes the zoom level from "100%" to , say, "200%",

all the components on the web page rerender proportionally bigger.

 

And we need to zoom the DatePicker react component as well.

We tried to use unofficial "zoom" CSS style property

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

and "scale" CSS function, but that does not give a good solution.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()

 

If that takes time, please advise an approach how we can achieve zooming of the DatePicker/DateInput react component.

So far only interested in zooming of the DateInput and calendar toggle button (not popup Calendar itself).

4 comments
ADMIN
Silviya
Posted on: 15 Feb 2021 07:26

Hello Alexander,

I'm afraid that zooming per percentage is not in our plans as browser zooming can be used instead.

In your application, you might test using the scale CSS function. It can be applied either on the component (for example the DropDownList) and also to its popup via DropDownsPopupSettings className property.

Best Regards,
Silviya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Alexander
Posted on: 11 Feb 2021 21:34

Hi, Silviya

Yes, in general we need to change the size of the component proportionally to the numeric "zoom" property, passed to the component.

That means increasing its internal parts: font size, spacings, icon sizes, width and height to match a new font size.

 

The link to the github provides a description of the size property, that can have only 3 values (small, mediun, large). 

But we need a more generic setting, a numeric value (or percentage value), that allows to scale the component size down or up.

Also, for the combined component we need the ability to set the "zoom" property for each subcomponent.

For exampe, for DatePicker we should be able to set "zoom" to the entire DatePicker component and optionally override it by setting the "zoom" to its subcomponents (DateInput, Calendar, ToggleButton)

 

 

     

    ADMIN
    Silviya
    Posted on: 11 Feb 2021 14:16

    Hello Alexander,

    Can you explain in more details what kind of zooming do you need to apply. Is if related to updating the font-size, spacings etc. of the components? 

    If that's correct, we are planning to enhance our components with a sizing options. As for now, only a few of them are having it like for example the Floating Action Button, Icon and SvgIcon, Loader, Badge, and Avatar components. We are planning to integrate the sizing options for Buttons (link to the issue: https://github.com/telerik/kendo-themes/issues/1983) and proceed with the others. Please let us know if this will work for you.

    Best Regards,
    Silviya
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

    Alexander
    Posted on: 04 Feb 2021 20:53
    Please find some screens attached.
    Attached Files:
    Create an account Log In
    View
    Type
    Status
    Category