CssLayout · Vaadin
Vaadin Framework - Layout Components - CssLayout
 Edit This Page

CssLayout

Live Demo

CssLayout allows strong control over styling of the components contained inside the layout. The components are contained in a simple DOM structure consisting of <div> elements. By default, the contained components are laid out horizontally and wrap naturally when they reach the width of the layout, but you can control this and most other behaviour with CSS. You can also inject custom CSS for each contained component. As CssLayout has a very simple DOM structure and no dynamic rendering logic, relying purely on the built-in rendering logic of the browsers, it is the fastest of the layout components.

The basic use of CssLayout is just like with any other layout component:

CssLayout layout = new CssLayout();

// Component with a layout-managed caption and icon
TextField tf = new TextField("A TextField");
tf.setIcon(new ThemeResource("icons/user.png"));
layout.addComponent(tf);

// Labels are 100% wide by default so must unset width
Label label = new Label("A Label");
label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
layout.addComponent(label);

layout.addComponent(new Button("A Button"));

The result is shown in Basic Use of CssLayout. Notice that the default spacing and alignment of the layout is quite crude and CSS styling is nearly always needed.

csslayout basic
Figure 1. Basic Use of CssLayout

The display attribute of CssLayout is inline-block by default, so the components are laid out horizontally following another. CssLayout has 100% width by default. If the components reach the width of the layout, they are wrapped to the next "line" just as text would be. If you add a component with 100% width, it will take an entire line by wrapping before and after the component.

CSS Injection

Overriding the getCss() method allows injecting custom CSS for each component. The CSS returned by the method is inserted in the style attribute of the <div> element of the component, so it will override any style definitions made in CSS files.

CssLayout layout = new CssLayout() {
    @Override
    protected String getCss(Component c) {
        if (c instanceof Label) {
            // Color the boxes with random colors
            int rgb = (int) (Math.random()*(1<<24));
            return "background: #" + Integer.toHexString(rgb);
        }
        return null;
    }
};
layout.setWidth("400px"); // Causes to wrap the contents

// Add boxes of various sizes
for (int i=0; i<40; i++) {
    Label box = new Label("&nbsp;", ContentMode.HTML);
    box.addStyleName("flowbox");
    box.setWidth((float) Math.random()*50,
                 Sizeable.UNITS_PIXELS);
    box.setHeight((float) Math.random()*50,
                  Sizeable.UNITS_PIXELS);
    layout.addComponent(box);
}

The style name added to the components allows making common styling in a CSS file:

.v-label-flowbox {
  border: thin black solid;
}

Use of getCss() and line wrap shows the rendered result.

csslayout getcss
Figure 2. Use of getCss() and line wrap

Browser Compatibility

The stregth of the CssLayout is also its weakness. Much of the logic behind the other layout components is there to give nice default behaviour and to handle the differences in different browsers. Some browsers, no need to say which, are notoriously incompatible with the CSS standards, so they require a lot of custom CSS. You may need to make use of the browser-specific style classes in the root element of the application.//// TODO: described in <xref linkend="advanced.browserinfo"/>