Zoom in / Out

Support
#1

I have a requirements to zoom In/Out from the user interface, say using + / - icons. This will zoom in the whole contents of the selected window or alternatively all contents of the application e.g. fonts, table grid, components etc. Thanks for any thoughts or comments.

#2

Hi,

I think you can apply transform and transform-origin CSS properties to your UI components:


.zoom-2x {
  transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
}

Then use Component.setStyleName method with “zoom-2x” value from your zoom 2x button.

Also, I recommend that you put your zoomable content inside of ScrollBoxLayout component (in case of whole UI it is not required).

1 Like
#3

Hey, can you provide code for zoom out also
I tried using scale(-2) but that didn’t work.

#4

Hello,

try to use value less than 1, e.g. transform: scale(0.5);

1 Like