How to design a form with FormLayout

Hi.

Vaadin ver.:7.5.1
I don’t know how to design a Form (FormLayout) as shown in my attachemnt.

Form is an modal Window popUp.
In a line with more than 2 colums I have 2 FormLayouts inside the HorizontalLayout, but
I could not manage to align this line with the lines above which are FormLayout rows.
Also I needo to know how to align the buttons in the same form.

Please explain which is the correct way to design forms with multi colums and labels at left side of the
component.

Thanks.
Aleksander
21824.jpg

Hi,

unfortunately FormLayout does not really support multiple columns. However, in your case you could just set the first field’s caption “Cajas” as the caption of the HorizontalLayout, and leave the field itself without a caption. I think it would then look decent.

-tepi

HI!
Thanks for the answer. I will try this. I hope the HL’s caption will appear at the left side.
Beside, I want to know how Vaadin Team thought to build more complex Forms, with several columns,
where designer can choose where to put the caption/label.
Also, how to align anything in FormLayout…

Aleksander

[size=2]
Hi Tepi!

Your adwice worked but still I have problem with textField aligment. Like showed at attached snapshot I can’t reduce the space between left border and
only this

TextField “Cajas”
in my code without changing everything else.
In the page I can do this changing the padding & width but not in the code.
There are 3 styles controling this layout in my case: v-formlayout-errorcell, v-formlayout-captioncell and v-formlayout-error-indicator. I don´t know how to access to this 3 styles with my stile.
with "
flMarca.addStyleName(“toLeft”);
" there is no efect and like it is I can´t use FL.
Also I’m not able to align the buttons in this window like I want.

I can tell that I’m really disappointed with Vaadin framework because of FL limitation and without tecnical support.
FL should have, or, must have the possibility to add n-columns and to change the “label position”. I don´t like it above the component (HL).

Simple design issues become to complex in Vaadin. And I just started to work with it. There are to many nested divs because of all this.
If I will not be able to solve this I will chosse another JSF Framework.

part of code controling this part:

frmMaska = new FormLayout();

.
[color=#0000FF]
final HorizontalLayout hlCajasMarca = new HorizontalLayout();
frmMaska.addComponent(hlCajasMarca);

hlCajasMarca.setCaption("Cajas");
final FormLayout flCajas = new FormLayout();
flCajas.addStyleName("toLeft");
hlCajasMarca.addComponent(flCajas);   
final TextField txtCajas = new TextField();
txtCajas.setWidth("50px");
txtCajas.addStyleName("desnaPoravnava");
flCajas.addComponent(txtCajas);
     
// Marca de caja - combo    
final FormLayout flMarca = new FormLayout();
flMarca.addStyleName("toLeft");
hlCajasMarca.addComponent(flMarca);
final ComboBox cmbMarcaCaja = new ComboBox("Marca");    
cmbMarcaCaja.setInputPrompt("Elija marca");
flMarca.addComponent(cmbMarcaCaja);

[/color]
[/size]

Regards!
Aleksander
21905.jpg

Hi!

I didn’t give up yet. So, I managed to design a “decent” multi columns form with a combination of HL and FL for each column.
But know I have another “cosmetic” problem with


*


location. Like shown in the attachent, * is correctly near the textfield wich is without caption/label. The “Cajas” caption belongs to HL.
So, my cuestion is, is there a way to shift * to the caption “Cajas”?

Thanks
Aleksander
21964.jpg

Hi Aleksander,

please try following:

  1. CSS .v-caption-required:after { content: "*"; color: red; padding-left:2px; } 2. Java hlayTest.addStyleName("required"); Regards,
    Gerhard

Hi Gerhard,

it worked. Thank you very much.

Regards,
Aleksander

Hi,

One more think about my “multi column form”.
To make it “almost” perfect, I want to control the space between the last row and the my “button row”.
As I don’t know how to change the
padding-bottom
of the HL caption I decided to add another empty “FL row”
and to change the
padding-top
(marked green in my attachment) or to be able to control this.

I was trying and trying but without any success.

Thanks
Aleksander

21992.jpg