I have a ProgressIndicator, a Label and a Tree added to a CSSLayout. Initially the ProgressIndicator and the Label visibility is set to false.
if a component in the tree is clicked the action listener changes the ProgressIndicator and the Label visibility to true.
Consequently the whole tree is shifted down by the height of the components whose property got changed to visible.
I am looking for a solution where even the invisible components occupy there space and when they are turned to visible, they do not disturb the other components.
Please suggest if Vaadin supports this.
I have worked with Flex3 and Flex4 where the components have a feature calleded rendered. So if we set the rendered flag to true and visible flag to false I get the behaviour as expected. I am not sure how Vaadin achieves this.
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.