CODEWITHSUNDEEP
javacssvaadinvaadin7
Kire Programista
Kire Programista

Reputation: 25

Vaadin align buttons

I have 4 buttons in a Gridlayout.

enter image description here

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

enter image description here

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

Upvotes: 0

Views: 1249

Answers (1)

Morfic
Morfic

Reputation: 15528

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:

vaadin-button-caption-alignment

Upvotes: 1

Related Questions