Directory

← Back

ColumnLayout

Alternative column based layouting to Horizontal+VerticalLayout and GridLayout

Author

Rating

Popularity

<100

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

Version 0.3+ are for Vaadin 8. Vaadin 7 users use 0.2.x versions.

Released
2017-03-13
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.4+ in 0.2.1
Vaadin 7.3+ in 0.1.6
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone
Microsoft Edge

ColumnLayout - Vaadin Add-on Directory

Alternative column based layouting to Horizontal+VerticalLayout and GridLayout ColumnLayout - Vaadin Add-on Directory
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.
Online