Directory

← Back

ColumnLayout

Alternative column based layouting to Horizontal+VerticalLayout and GridLayout

Author

Contributors

Rating

ColumnLayout is an UI component add-on for Vaadin 7.3+ and Valo based themes

It provides alternative for Horizontal+VerticalLayout and GridLayout usage when building columned layouts.

ColumnLayout is designed to be easier to extend also on client side (than core Vaadin layouts). As example of this, add-on provides Material design styled column form layout.

Sample code

ColumnLayout layout = new ColumnLayout();
layout.setMargin(true);
layout.setSpacing(true);
layout.setWidth("100%");

TextField firstName = new TextField("First name");
firstName.setWidth("100%");
layout.addComponent(firstName, 0);

TextField lastName = new TextField("Last name");
lastName.setWidth("100%");
layout.addComponent(lastName, 0);

TextField address = new TextField("Address");
address.setWidth("100%");
layout.addComponent(address, 1);

// To split column cell, just use HorizontalLayout
HorizontalLayout cityAndZipCode = new HorizontalLayout();
spacingHandlers.add(cityAndZipCode);
cityAndZipCode.setWidth("100%");
layout.addComponent(cityAndZipCode, 1);

TextField city = new TextField("City");
city.setWidth("100%");
cityAndZipCode.addComponent(city);
cityAndZipCode.setExpandRatio(city, 1.0f);

TextField zipCode = new TextField("Zip code");
zipCode.setWidth("100%");
cityAndZipCode.addComponent(zipCode);
cityAndZipCode.setExpandRatio(zipCode, 1.0f);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Adds missing no tooltips versions of inline/popup datefield and slider to be used with material version of column layout

Released
2015-03-24
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.4+
Vaadin 7.3+ in 0.1.0
Vaadin 8.0+ in 0.3.1
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online