Problem of hidden fields which always use of the space

Hello Everyone,

I have to create a form with Vaadin. My problem is the following one:
I have a field “Select” allowing to choose a value of protocol.
If I choose the value HTTPS_CUSTOM, I show below the fields of options which are hidden by default.
I used the setVisible(false) method to hide the optional fields.
But during the display, there is a space enter my fields “Select” of value of protocol and one following fields.
The space represents the fields of option hidden previously.

How to have no space in this place?

I specify that I have already used the setSpacing ( false ) method to try to solve this problem.



Some additional information:
The FormLayout is in a Panel which is itself in FormLayout.
Every Panel of FormLayout (of base) represents a sub-form, thus contains FormLayout. (See the third image for more information)


If you put an invisible component in a layout, the layout component will have a cell element for it, which may take some space. Even expand ratios work for invisible components.

So, you have at least two solutions: 1) don’t use invisibility for optional components but add them to the layout using addComponent(c,position) when the user selects the option, 2) if you have a group of optional components, put them in a separate layout (or CustomComponent or whatever) and make the layout component invisible (or create it when needed).

The solution 1) is the only possible choice if you want to have the captions and components neatly in separate columns in FormLayout.

…and ditch the Panel components that wrap the inner FormLayouts if you don’t need scrolling for that content. Otherwise it is just extra rendering work for the browser. Just put the FormLayouts inside the other FormLayout.

Actually, I’d prefer a cleaner or less intrusive approach via css:

.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell,
.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell,
.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell {padding-top:0}
.v-formlayout-spacing .v-formlayout-row > td .v-errorindicator,
.v-formlayout-spacing .v-formlayout-row > td > * {margin-top:8px} /* this is the amount of spacing you want for the layout */
.v-formlayout-spacing .v-formlayout-captioncell .gwt-HTML, /*checkbox has no caption*/
.v-formlayout-spacing .v-formlayout-row .v-formlayout-error-indicator {margin-top:0}

Tested in latest Chrome, Firefox and IE9 64-bit.

Any improvement/suggestion are welcome.