How to align/move Vaadin buttons

Question

I am learning Vaadin and I would like to move two buttons to the bottom of pop up window with spacing in between the buttons. I'm pretty sure I would have to override the button css in my theme but how do I change the absolute location of the button in java code?

Here is my code: A simple button with a click listener that calls a pop up method (subwindow). In the below code I'm trying to move the yes button to the bottom of pop up window.

protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();

    Button helloButton = new Button("Click Me");
        helloButton.addClickListener(e -> helloPopUp()); 

    layout.setMargin(true);
    layout.setSpacing(true);
    layout.addComponents(helloButton);
    setContent(layout);
}

private void helloPopUp() {
        Window subWindow = new Window("Pop Up");                    
        HorizontalLayout subContent = new HorizontalLayout();
        AbsoluteLayout layout2 = new AbsoluteLayout();
        subContent.setMargin(true); 

            Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
            subContent.addComponent(text);

            Button yes = new Button("Yes");
            Button no = new Button("No");               
            layout2.addComponent(yes, "left: 50px; bottom: 0px;");

            subContent.addComponents(layout2);
            subContent.addComponent(no);
            subWindow.setContent(subContent);
            UI.getCurrent().addWindow(subWindow);           
        }

I'd use a VerticalLayout for the content, then put the two buttons into their own horizontal layout and use setSpacing(true) on that layout. Then use setComponentAlignment on the vertical layout to set the alignment of horizontal to bottom right. — Chris M, Oct 30 '16 at 07:39

score 2 · Accepted Answer · answered Nov 01 '16 at 18:04

Here is a way to do this without using AbsoluteLayout

private void helloPopUp() {
    Window subWindow = new Window("Pop Up");
    VerticalLayout subContent = new VerticalLayout();
    subContent.setMargin(true);

    Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
    subContent.addComponent(text);

    Button yes = new Button("Yes");
    Button no = new Button("No");

    HorizontalLayout buttonsLayout = new HorizontalLayout();
    buttonsLayout.addComponents(yes, no);
    buttonsLayout.setSpacing(true);

    subContent.addComponent(buttonsLayout);
    subContent.setComponentAlignment(buttonsLayout, Alignment.BOTTOM_LEFT);
    subWindow.setContent(subContent);
    UI.getCurrent().addWindow(subWindow);
}

How to align/move Vaadin buttons

1 Answers1