Zoom in / Out

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.

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