Vaadin 对齐按钮

Question

我在网格布局中有 4 个按钮。

我用过

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

但是正如您所见，由于 setSizeUndefined();

，按钮的宽度不同

当我指定按钮的宽度和高度时，我得到了这个结果

你可以看到这样按钮没有对齐。我已经包括

 buttonsGrid.setComponentAlignment(btnDetails, Alignment.MIDDLE_LEFT);

但如果没有 setSizeUndefined();

，这似乎不起作用

我需要按钮像第一张图片一样对齐，但宽度相同。

谢谢，基里尔

Answer 1

在您的主题中使用 text-align: left 怎么样？像这样（对于 Vaadin 8，将 FontAwesome 替换为 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);
    }
}

主题：

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

结果：

Vaadin 对齐按钮

Vaadin align buttons

css

java

vaadin

vaadin7