Form Alignment

Vaadin 6 / 7 / 8 Framework UI
1

Hi, I’m trying to do this:
setComponentAlignment(userForm, Alignment.BOTTOM_RIGHT);

but it’s not working, is there a way to do this? Is it necessary to add the form to a new Layout and set the layout alignment instead?

2

Looks correct to be, you should call that method for the parent layout, so it will look something like this

VerticalLayout layout = new VerticalLayout()
...
layout.setComponentAlignment(userForm, Alignment.BOTTOM_RIGHT);

The next thing you should check is the parent layout’s size, have you defined a height for it? If you haven’t, then the layout won’t take more space than what it needs, which means that aligning the form to the bottom won’t have any effect. Try adding this

layout.setSizeFull();
3

Unfortunatelly, my layout does have setSizeFull();

[code]

public LoginWindow() {
super(“Entrar”);
setHeight(“300px”);
setWidth(“400px”);
setModal(true);

    initComponents();

    addActionHandler(this);
    userSessionMB.addLoginListener(this);
}

private void initComponents() {
    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSpacing(true);
    [b]

mainLayout.setSizeFull();
[/b]

    initLoginForm(mainLayout);
    initRegistrationLayout(mainLayout);

    addComponent(mainLayout);
}

private void initLoginForm(AbstractOrderedLayout mainLayout) {
    loginForm = new UserForm();
    loginForm.setVisibleItemProperties(Arrays.asList(new String[]{"email", "password"}));

    loginForm.getField("email").focus();

    HorizontalLayout buttonLayout = new HorizontalLayout();
    buttonLayout.setSpacing(true);

    loginButton = new Button("Entrar", this);
    cancelLoginButton = new Button("Cancelar", this);

    buttonLayout.addComponent(loginButton);
    buttonLayout.addComponent(cancelLoginButton);

    [b]

mainLayout.addComponent(loginForm);
mainLayout.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER);
[/b]

    mainLayout.addComponent(buttonLayout);
    mainLayout.setComponentAlignment(buttonLayout, Alignment.MIDDLE_CENTER);
}

[/code]

4

A bit old thread with a now almost classical error. Every window contains a component container (e.g. a layout). This can be set using window.setContent(). In your example the content of the window is not 100% high, thus the alignments won’t work. Opening the application using “?debug” and running analyze layouts will also tell you this.

Fix: Change addComponent(mainLayout); to setContent(mainLayout).

5

That’s true… thanks!

I forgot it was a window…

6

Hi,
i read about form alignment, but I’m not able to set my form position.
I’m using a VerticalLayout on which I need to add the form.
This form use a FormLayout as shown in the following code:

[code]
public class SampleForm extends Form {

private FormLayout mainFormLayout;

public SampleForm() {
      initLayout();
      setLayout(mainFormLayout);
}

private void initLayout() {

   mainFormLayout = new FormLayout();
   mainFormLayout.setSpacing(true);
   mainFormLayout.setMargin(true);
   
   setFormFieldFactory(new FormFieldFactory() {
       ......
   });

}
}
[/code]The form is inserted in a CustomComponent as in the following

[code]
public class NewSampleArea extends CustomComponent {

private VerticalLayout verticalLayout;

public NewSampleArea() {
       initLayout();
       setCompositionRoot(verticalLayout);
}




private void initLayout() {
   verticalLayout = new VerticalLayout();
   verticalLayout.setSpacing(true);
   verticalLayout.setMargin(true);
   verticalLayout.setSizeFull();

   HorizontalLayout labelLayout = new HorizontalLayout();
   labelLayout.setSizeFull();
   Label reservedAreaLabel = new Label("AREA RISERVATA");
   reservedAreaLabel.addStyleName("section-description-style");
   labelLayout.addComponent(reservedAreaLabel);
   labelLayout.setComponentAlignment(reservedAreaLabel, 
                                     Alignment.MIDDLE_RIGHT);

    verticalLayout.addComponent(labelLayout);

    VerticalLayout formLayout = new VerticalLayout();
    formLayout.setSpacing(true);
    Form sampleForm = new SampleForm();
    sampleForm.setItemDataSource(prepareItem());
    formLayoUt.addComponent(sampleForm);
    formLayout.setComponentAlignment(sampleForm, Alignment.MIDDLE_CENTER);
    verticalLayout.addComponent(formLayout);
    verticalLayout.setComponentAlignment(formLayout,
                        Alignment.MIDDLE_CENTER);

   ....
}

…
}
[/code]I see the form in the layout, but it has a left alignment instead of a centered one.

Can anyone help me to resolve the issue?

Thanks in advance.