Get the exactly width and height of a component in Vaadin

Question

In vaadin, if I set width and height to undefined, I will get -1 when using getHeight()/getWidth() function. if I use sizeful(), I will get 100%. But how can I get the exactly width and height of a component?

Solution 1

In Vaadin, the layout is realized by the client side engine in the browser and the concrete sizes of layout components usually depend on the size of the browser window. Component sizes are not sent back to the server by the Vaadin standard components.

Since all of your code is executed on the server, it cannot get at those values, either. You would need to program a special wrapper component that sends its size back to the server each time it changes.

---

Update 2013-03-21: I have developed the SizeReporter add-on for Vaadin 7 which sends back the size of the component to the server and notifies you when the size changes.

Solution 2

You can do it by call javascript function an get callback result. Read more in http://demo.vaadin.com/sampler/#foundation/javascript-callback

somthing like this:

If you have HorizontalLayout h

HorizontalLayout h = new HorizontalLayout()
//...
h.setId("myId");
JavaScript.getCurrent().addFunction("myGetWidth",
   new JavaScriptFunction() {
       @Override
       public void call(final JSONArray arguments)
               throws JSONException {
         int width = arguments.getInt(0);
         //now you can do something with this width
       }
   });
JavaScript.getCurrent().execute("myGetWidth(document.getElementById('" +h.getId() + "').clientWidth);");

Solution 3

Maybe it's too late, but I post this here just to know:

Now, you could use this Add-On from the vaadin directory to accomplish that (https://vaadin.com/directory#addon/css-tools).

This Add-On simply allows you, given a certain component, to geather CSS info about it. I'll put the code example here (that is the same you find in the Add-On page)

    RenderInfo.get(component, new Callback() {
            public void infoReceived(RenderInfo info) {
                   // Use the info
                   // All the properties are returned as Strings, e.g. "123px"
                   String width = info.getProperty(CssProperty.width);
            }
    },CssProperty.height, CssProperty.width);

In this way you get just Height and Width of the selected component!