Align components in horizontal layout

Vaadin 6 / 7 / 8 Framework UI
1

I’ve got 2 horizontal layout inside a vertical layout. In the first horizontal layout i’ve got a label and a textbox. In the second one I’ve got a label and a combobox.

The fact is the 2 labels and components are not aligned. So I’ve tried : horizontal.setExpandRatio(lbReference, 0.1f); for the first horizontal & horizontal.setExpandRatio(lbReference, 0.9f); for the second one. However the combo box is not well aligned with the textbox as you can see on err_pres_1.png

Do you know how to avoid this effect ?

Regards,
Denis.
11459.png

2

The code I’im using is the following :


        VerticalLayout vertical = new VerticalLayout();    	
    	Drawer panelContactEmetteur = new Drawer("CONTACT EMETTEUR", vertical);
    	panelFormRetraitRappel.addComponent(panelContactEmetteur);
    	
    	horizontal = new HorizontalLayout();
    	horizontal.setWidth("100%");    	
    	Label lbPrenomNom = new Label("Prénom Nom");
    	//lbPrenomNom.setWidth("100px");
    	horizontal.addComponent(lbPrenomNom);
    	horizontal.setExpandRatio(lbPrenomNom, 0.1f);
    	TextField tfPrenomNomValue = new TextField();
    	    	
    	tfPrenomNomValue.setValue("Pn");
    	horizontal.addComponent(tfPrenomNomValue);
    	horizontal.setComponentAlignment(tfPrenomNomValue, Alignment.BOTTOM_LEFT);
    	horizontal.setExpandRatio(tfPrenomNomValue, 0.9f);
    	vertical.addComponent(horizontal);    	
    	horizontal = new HorizontalLayout();
    	horizontal.setWidth("100%");
    	Label lbEntite = new Label("Entité");
    	//lbEntite.setWidth("100px");
    	horizontal.addComponent(lbEntite);   
    	horizontal.setExpandRatio(lbEntite, 0.1f);
    	ComboBox cbEntite = new ComboBox();
    	cbEntite.addItem("aa");
        cbEntite.addItem("bb");
        cbEntite.addItem("cc");
    	cbEntite.addItem("dd Ouest");
    	cbEntite.addItem("ee Est");
    	cbEntite.addItem("ff");
    	cbEntite.addItem("gg");
    	cbEntite.addItem("hh");
    	cbEntite.addItem("ii");
    	cbEntite.addItem("jj");
    	cbEntite.addItem("kk");
    	horizontal.addComponent(cbEntite);
    	horizontal.setComponentAlignment(cbEntite, Alignment.BOTTOM_LEFT);
    	horizontal.setExpandRatio(cbEntite, 0.9f);
    	vertical.addComponent(horizontal);
    	horizontal = new HorizontalLayout();
    	horizontal.setWidth("100%");
    	Label lbSiAutre = new Label("Si autre");
3

A simple way would be to use a GridLayout instead of several layouts.

4

I finally manage to do it with a GridLayout :slight_smile:


GridLayout gl = new GridLayout(2, 1);
Drawer referencePanel = new Drawer("Référence", gl);
panelFormRetraitRappel.addComponent(referencePanel);
Label lbReference = new Label("Référence");
lbReference.setWidth("200px");
gl.addComponent(lbReference);
Label lbReferenceValue = new Label("REF-001");    	
lbReferenceValue.addStyleName("dark-label");    	
gl.addComponent(lbReferenceValue);
panelFormRetraitRappel.addComponent(new Label("<br/>", Label.CONTENT_XHTML));