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?

Answer 1

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);");

Answer 2

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.