Forcing Vaadin Component to occupy it's space in invisible state

Question

I have a Label and a Progess Indicator in my Vaadin indicator. It is dynamically made visible in the UI. There is a Tree below this Progress Indicator.

When the program dynamically sets the visibility of the Progress Indicator to true, the tree shifts down and the UI shakes due to the shifting.

Is there any way to make a Vaadin component occupy it's space, even if it is invisible and hence, when made visible it must not try to borrow space from other UI components?

What I am looking for is a feature similar to setRendered(true) in flex and actionscript programming.

Thanks for your help.

Answer 1

Finally I got an answer to my question. I just replaced the invisible components with a dummy visible label with no text.

And used it alternatively to switch between visible and invisible.

I asked the question in the Vaadin forum, and here's the response I got, from Kim Leppanen:

With Vaadin 7, if you set a component's visibility to false, then the component's information is not sent to the browser at all - it is just as if the component wouldn't exist in the layout at all.

I can quickly come up with two solutions. If you know the size of the component whose visibility you want to toggle, then you can use placeholder components - such as a Label. Put a label with the correct size in the place where you want the component. When you want to set a component as visible, then replace the label with the actual component.

The second option is to use css. Apply the css attribute "visibility: hidden" for the component you want to hide. Note that the component is not "truly" hidden. Let's say that it is a button. A user could still inspect the DOM tree and see the button in the code, change the visibility of the component on the client side (eg using developer tools or firebug) and then see and use the button as if it would be visible in the layout.

I am putting it here because people might add some more useful answers there. For a detailed explanation please see this.

Answer 2

Use this following example to the component you want set invisible but keeping its occupied space:

Image home = new Image();
home.setSource(HOME);
home.addStyleName("visibility: hidden");

OR

home.addStyleName("visibility: collapse");