Vaadin - center custom component

Question

Using Grails 2.3.9 and Vaadin plugin 7.3.9

class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout()
        layout.setMargin(true)

        SignInForm signInForm = new SignInForm()

        layout.addComponent(signInForm)

        layout.setComponentAlignment(signInForm, Alignment.MIDDLE_CENTER)

        layout.setSizeFull()
        setContent(layout)

    }
}

Custom component

class SignInForm extends CustomComponent {
    Panel p = new Panel()

    public SignInForm() {
        p.setSizeUndefined()

        Label label = new Label("test");
        p.setContent(label);

        setCompositionRoot(p);
    }
}

This is how it looks:

enter image description here

How can I center the custom component horizontally?

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Place the custom component inside a vetical layout. Set the size of the custom component undefined. Set the size of the vertical layout full & align it to the centre.

public void init(VaadinRequest request) {

    VerticalLayout vLayout = new VerticalLayout();
    SignInComponent signInComponent = new SignInComponent();
    vLayout.addComponent(signInComponent);
    vLayout.setSizeFull();
    vLayout.setComponentAlignment(signInComponent, Alignment.MIDDLE_CENTER);
    this.setContent(vLayout);

class SignInComponent extends CustomComponent  {

    public SignInComponent() {
        Panel p = new Panel();
        p.setSizeUndefined();
        Label label = new Label("test");
        p.setContent(label);
        this.setSizeUndefined();
        this.setCompositionRoot(p);
    }
}

OR

Use a panel instead of custom layout:

public void init(VaadinRequest request) {

    VerticalLayout vLayout = new VerticalLayout();
    SignInPanel signInPanel = new SignInPanel();
    vLayout.addComponent(signInPanel);
    vLayout.setSizeFull();
    vLayout.setComponentAlignment(signInPanel, Alignment.MIDDLE_CENTER);
    this.setContent(vLayout);

}

class SignInPanel extends Panel  {

    public SignInPanel() {
        this.setSizeUndefined();
        Label label = new Label("test");
        this.setContent(label);
    }
}

Code output for both: enter image description here

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 17 '15 at 11:05

Kevvvvyp

1,704
2
18
38

Did you use a custom component class? I get it working by moving all code into my `MyUI` class. But using a custom component like in my example is not centered. – A.W. Feb 17 '15 at 13:00
Ah i had assumed you could do the same with a custom component, I see the issue. See edit. – Kevvvvyp Feb 17 '15 at 13:38
Thanks, a `Panel` will do just fine. Got it working now. – A.W. Feb 17 '15 at 13:46
1

No problem! Edited my answer to include a solution for centering a custom component too. – Kevvvvyp Feb 17 '15 at 15:04
Aah that makes sense now! The missing link was `this.setSizeUndefined()` in the custom component. – A.W. Feb 17 '15 at 15:24
@Guus was the solution now the change to panel or would have setSizeUndefined also worked with your original code? – cfrick Feb 17 '15 at 17:07
1

@cfrick they both work. I ended up adding `setSizeUndefined` to my custom component. – A.W. Feb 17 '15 at 17:23

Malakai · Answer 2 · 2016-04-09T15:37:47.293

If someone need - How to center Custom Component with minimal UI class usage (Navigator component required):

The Component:

public class LoginPanel extends Panel {

private TextField loginField;

private PasswordField passField;

private Button signInBtn;

public LoginPanel(){
    initComponents();
    buildLoginPanel();
}

private void initComponents(){
<omitted>
}
public void buildLoginPanel(){
<omitted>
}

The View that uses Component:

public class LoginView extends VerticalLayout implements View {

    private LoginPanel loginPanel;

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {

    }

    public LoginView(LoginPanel loginPanel){
        setSizeFull();
        addComponent(loginPanel);
        setComponentAlignment(loginPanel,Alignment.MIDDLE_CENTER);
    }
}

UI entry point:

 @Override
 protected void init(VaadinRequest request) {
        Navigator navi = new Navigator(UI.getCurrent(),this);
        navi.addProvider(viewProvider);
        navi.navigateTo("login");
   }

P.S after doing this - your component will be centralized

P.S.S if someone doenst like to use Navigator for some point , just remove View everywhere and instead of navigator.navaigateTo(...) use setContent(new LoginView()) or something simlar

Hope someone this will help

Vaadin - center custom component

2 Answers2

Linked