Directory

← Back

responsive-layout

Drop in replacement for Vertical Horizontal Layout to make responsive web applications

Author

Rating

Popularity

100+

Responsive Layout

Vaadin is great! Responsive webpages are great... Wait a minute!! lets put them together! alt text ### Features

  • Easily move from Vertical or Horizontal Layouts (uses same api)
  • Removes Vertical Horizontal Soup from your code
  • Performance Boost very lightweight layout
  • Looks great on every device
  • Easy layout customization not stuck to anything predefined

Documentation

Examples

Grid Concept

What do you think of ResponsiveLayout?

  • Please feel free to comment with your thoughts
  • Report any issues you come across

Thanks!

Sample code

ResponsiveRow row = responsiveLayout.addRow()
                .withAlignment(Alignment.MIDDLE_CENTER)
                .withMargin(true);

 ResponsiveColumn column = row.addColumn()
                .withDisplayRules(12, 3, 12, 12)
                .withVisibilityRules(false, true, true, true)
                .withComponent(/*button etc*/);
ResponsiveLayout responsiveLayout = new ResponsiveLayout();
ResponsiveRow row = new ResponsiveRow();

ResponsiveColumn column1 = new ResponsiveColumn();
column1.addRule(DisplaySize.XS,12)
column1.addRule(DisplaySize.MD,6)

Column column2 = new Column();
column2.addRule(DisplaySize.XS,12)
column2.addRule(DisplaySize.MD,6)

row.addColumn(column1);
row.addColumn(column2);

responsiveLayout.addRow(row);
```
private ResponsiveLayout rl = new ResponsiveLayout().withDefaultRules(12, 12, 6, 6).withFlexible();
private ResponsiveRow row = rl.addRow().withGrow(true).withSpacing(true);
private ResponsiveRow row2 = rl.addRow().withGrow(true).withSpacing(true);
...
rl.setSpacing();
```

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.

Released
2016-10-04
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 8.0+ in 2.1.1
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

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