Vaadin align buttons

Question

I have 4 buttons in a Gridlayout.

I have used

btnDetails.setSizeUndefined();
buttonsGrid.setComponentAlignment(btnDetails, Alignment.MIDDLE_LEFT);

But as you can see the buttons are not with same width because of the setSizeUndefined();

When I specify the width and the height of the buttons I get this result

You can see that in this way the buttons are not aligned. I have included

 buttonsGrid.setComponentAlignment(btnDetails, Alignment.MIDDLE_LEFT);

but it seems this is not working without setSizeUndefined();

I need the buttons to be aligned as in the first picture but with same width.

Thanks, Kiril

Answer 1

How about using text-align: left in your theme? Something like this (for Vaadin 8 replace FontAwesome with VaadinIcons):

Java:

public class GridLayoutWithLeftAlignedButtons extends GridLayout {
    public GridLayoutWithLeftAlignedButtons() {
        super(1, 4);
        addButton("Details", FontAwesome.SEARCH);
        addButton("Copy (Inhalt)", FontAwesome.FILE_TEXT);
        addButton("Copy (Zeile)", FontAwesome.COPY);
        addButton("Copy (ID)", FontAwesome.SERVER);
    }

    private void addButton(String caption, FontAwesome icon) {
        Button newButton = new Button(caption, icon);
        newButton.addStyleName(ValoTheme.BUTTON_BORDERLESS);
        newButton.addStyleName("black-background-white-text");
        newButton.setWidth("300px");
        addComponent(newButton);
    }
}

Theme:

.v-button.black-background-white-text{
  background-color: black;
  color: white;
  text-align: left;
}

Result: