Basic Use

Basic Configuration
Styling

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

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

Note	With 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.

Note	For a few components you should not use relative height, but set height of the component in pixels or leave it undefined height. This affects Grid, Tree, TreeGrid, GridLayout and Spreadsheet.

Note	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

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

Note	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.

Docs

Docs

Basic Use

Basic Configuration

Styling