Home/ Questions/Q 8844657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:32:32+00:00

In order to scale elements in my div, I’m using this css ( JSFiddle

  • 0

In order to scale elements in my div, I’m using this css (JSFiddle Example here):

.scaled {
    transform: scale(0.5);
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Safari and Chrome */
    -o-transform: scale(0.5); /* Opera */
    -moz-transform: scale(0.5); /* Firefox */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=0.5, M12=0,
        M21=0, M22=0.5);
}

This is supported by all major browsers (including IE8).

Now when I try to apply this css dynamically in GWT:

public void setZoom(double val) {
    if (val != 1) {
        surface.getElement().getStyle().setProperty("transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-ms-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-webkit-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-o-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-moz-transform", "scale(" + val + ")");
        surface.getElement().getStyle()
                .setProperty("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + val + ", M12=0,M21=0, M22=" + val + ")");
    }

}

I get the following error:

Caused by: java.lang.AssertionError: The style name '-ms-transform' should be in camelCase format
    at com.google.gwt.dom.client.Style$.assertCamelCase$(Style.java:1603)
    at com.google.gwt.dom.client.Style$.setProperty$(Style.java:1512)

How can I set these browser dependent styles dynamically in GWT? (especially IE’s filter..)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use value function in CSS ResourceBundle or conditional CSS:

    https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Value_function

    But I don’t understand from your code why you need to use transform: scale at all. You can simply set the size of this element directly, like 

    surface.setSize("100px", "200px")

    If you set size relative to something, you can first measure that something (window or element), and calculate the size you need. This solution works in all browsers and you don’t have to rely on CSS3 being supported.

    EDIT:

    You can have a div (“surface” in your example) which does not change its size. This div will include another div (for example, “wrapper”), which contains all internal content. All content can be set in either percents or em relative to the wrapper div. When you need to scale your content, you simply change the size of the wrapper div – and all of its contents will scale accordingly.

    • 0