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のためVaadinIconsでFontAwesomeを置き換える）：

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; 
} 

結果：