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

Initial release with OSGi bundle support and Material design example extension of ColumnLayout

Released
2014-11-20
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.3+
Vaadin 7.4+ in 0.1.7
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