Contact us Create app

Directory

← Back

ColumnLayout

Alternative column based layouting to Horizontal+VerticalLayout and GridLayout

Author

Rating

Links

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

Last updated: 2017-03-13

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

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.
Author Homepage
Online Demo
Issue Tracker
Source Code

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

ColumnLayout version 0.1.1
Fixes OSGi manifest (doesn't export or import client side) Fixes minor CSS mistake in Material

ColumnLayout version 0.1.2
setComponent functionality added (with placeholders) More Material design CSS fixes Fixing wrapping issue when used inside Vertical/HorizontalLayouts

ColumnLayout version 0.1.3
Fixes client side exception

ColumnLayout version 0.1.4
Fixes client side errors when invisible components used inside ColumnLayout

ColumnLayout version 0.1.5
SCSS mixins have now parameters. Making it easier to have different look'n feel of ColumnLayouts inside same theme.

ColumnLayout version 0.1.6
Material version of ColumnLayout allows now HTML in descriptions and notifies server when tooltip are clicked. And bad variable names used in 0.1.5 to define default colors of column layout fixed ($my- prefixes replaced with better).

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

ColumnLayout version 0.2.0
- Adds click details to tooltip click event of MaterialColumnLayout - Adds no tooltips versions of inline/popup datefield, slider and label - Add support for Reindeer theme, by making Valo depending material parts optional. If you used material parts, update your theme by: ```scss // ... these lines should follow importing your base theme (that is valo based) @import "addons"; // ADD NEXT ROW: @import "../../../VAADIN/addons/columnlayout/columnlayout-material.scss"; // ... @include addons; // Include optional material version, ADD NEXT ROW: @include columnlayout-material-default; // ... ``` If you have used advanced theming, so variable and mixing names have changed.

ColumnLayout version 0.2.1
Cleans client side logging

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

Online