Vaadin Board - Java API - Basic Use
 Edit This Page

Basic Use

The Board is a responsive layout, where you can add any Vaadin component. This chapter assumes you have already added Vaadin Board to your project and installed the license key. If not, check the instructions in "Getting Started Section".

Basic Configuration

Board is divided into rows, using Row class. Rows are divided into columns. You can put any Vaadin component inside the Row. Every element inside the row can take from one to four columns. Vaadin Board rearranges child elements based on available space. In the example below every child Label will use 25% on Desktop, but will be rearranged to two rows when switching to tablet: both with 2 items that take 50% of available space each, see example below.

        Board board = new Board();
        board.setSizeFull();

        Label lbl1 =  new Label("LABEL1");
        Label lbl2 =  new Label("LABEL2");
        Label lbl3 =  new Label("LABEL3");
        Label lbl4 =  new Label("LABEL4");

        board.addRow(lbl1, lbl2, lbl3, lbl4);
        setContent(board);

You can specify the element to occupy from one to four columns, by using setComponentSpan():

        Board board = new Board();
        board.setSizeFull();

        Label lbl1 =  new Label("LABEL1");
        Label lbl2 =  new Label("LABEL2");
        Label lbl3 =  new Label("LABEL3");

        Row row = board.addRow(lbl1, lbl2, lbl3);
        // specify first component to use
        // 2 columns
        row.setComponentSpan(lbl1, 2);
        setContent(board);
By default, mobile browsers have fixed viewport size. Set the viewport size to follow the screen-width of the device by adding the @Viewport annotation to the UI class:
@Viewport("width=device-width")
public class MyUI extends UI {

Styling

Vaadin Board rearranges elements in your layout based on available space. In some cases you want to use different styles depending on how the elements are laid out, e.g. use smaller font size for mobile devices. Vaadin Board has three predefined class selectors for vaadin-board-row:

  • small - for rows smaller than 600 pixels.

  • middle - for rows between 600 and 969 pixels.

  • large - for rows bigger than 960 pixels.

    Board board = new Board();
    board.setSizeFull();

    Label lbl1 =  new Label("LABEL1");
    Label lbl2 =  new Label("LABEL2");
    Label lbl3 =  new Label("LABEL3");

    board.addRow(lbl1, lbl2, lbl3);
    setContent(board);
vaadin-board-row.large .v-label {
        font-weight: bold;
        font-size: 28px;
}
vaadin-board-row.medium .v-label {
        font-weight: normal;
        font-size: 18px;
}

After adding this CSS to your theme you will see that labels have different font-size for different viewport size.

Known Issues

  • Setting height for the row is not supported. Set height for the child components.

  • You can not set relative height for Grid, GridTree, GridLayout, SpreadSheet inside the board row. If Vaadin component height depends on its content, setting relative height for this component makes them very small. You need to set the height of the component in pixels or set its content to have fixed size. This issue happens for Grid, Tree, TreeGrid, GridLayout, Spreadsheet.

  • Vaadin Flash Component does not resize correctly inside the Vaadin Board.

  • Vaadin TwinColSelect does not resize correctly, the second row of the component sometimes rendered at the bottom, instead of to the right of the first row.

  • Vaadin TabSheet does not resize correctly, when changing from a small viewport size to a big one. Wrapping TabSheet inside the CSSLayout fixes the problem.

  • Because Vaadin Board uses flexbox, there is a limited support for IE11. If you want to have a border for the direct child of the Row you need to create a wrapper HTML element and add a border there, but not to the direct child of the Row. The description of the bug can be found here.

For Vaadin Components this means, you need to put Vaadin Components that have border inside a CSSLayout. This limitation does not affect Label, Grid, Chart.