vaadin/vaadin-ordered-layout

A set of two Web Components providing a simple way to horizontally or vertically align your HTML elements. Part of the Vaadin components.

<vaadin-ordered-layout>

⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the vaadin/web-components monorepository. This repository contains the source code and releases of <vaadin-ordered-layout> for the Vaadin versions 10 to 19.

<vaadin-ordered-layout> consist of two Web Components providing a simple way to horizontally or vertically align your HTML elements, part of the Vaadin components.

Live Demo ↗ | API documentation ↗

<vaadin-horizontal-layout>
  <div>Horizontally</div>
  <div>Aligned</div>
</vaadin-horizontal-layout>
<vaadin-vertical-layout>
  <div>Vertically</div>
  <div>Aligned</div>
</vaadin-vertical-layout>

Installation

The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components are only published on npm, not pushed to GitHub repositories.

Polymer 2 and HTML Imports Compatible Version

Install vaadin-ordered-layout:

bower i vaadin/vaadin-ordered-layout --save

Once installed, import it in your application:

<link rel="import" href="bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">

Polymer 3 and ES Modules Compatible Version

Install vaadin-ordered-layout:

npm i @vaadin/vaadin-ordered-layout --save

Once installed, import it in your application:

import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

• The components with the Lumo theme:

  theme/lumo/vaadin-horizontal-layout.html
theme/lumo/vaadin-vertical-layout.html

• The components with the Material theme:

  theme/material/vaadin-horizontal-layout.html
theme/material/vaadin-vertical-layout.html

• Alias for theme/lumo/vaadin-horizontal-layout.html
theme/lumo/vaadin-vertical-layout.html:

  vaadin-horizontal-layout.html
vaadin-vertical-layout.html

Running demos and tests in a browser

1. Fork the vaadin-ordered-layout repository and clone it locally.

2. Make sure you have npm and Bower installed.

3. When in the vaadin-ordered-layout directory, run npm install and then bower install to install dependencies.

4. Run npm start, browser will automatically open the component API documentation.

5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

• http://127.0.0.1:3000/components/vaadin-ordered-layout/demo
• http://127.0.0.1:3000/components/vaadin-ordered-layout/test

Running tests from the command line

1. When in the vaadin-ordered-layout directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

vaadin-ordered-layout's Issues

Decide and (or not to) implement child stretching change

Improve demos

Examples could all have at least three layout items, to better illustrate the gap feature.

Also reduce the number of demos (combine features), no need to demonstrate every feature for horizontal/vertical layout separately. Or at least split the elements on different pages.

Update main field in package.json

Still pointing to the unexisting file: vaarin-ordered-layout.html

DX/UX tests

Plan and conduct

setHeight is ignored for VerticalLayout when using addAndExpand

This code results in two different layouts:

@Route("test")
@PageTitle("VerticalLayout Examples")
public class TestView extends VerticalLayout {

    public TestView() {
        setSpacing(true);
        setPadding(true);

        VerticalLayout layout = new VerticalLayout();
        add(layout);
        layout.setWidth("600px");
        layout.getStyle().set("background-color", "#eee");
        layout.setPadding(true);
        layout.setHeight("300px");
        layout.addAndExpand(new Button("Button one"), new Button("Button two")); // adds and flex-grows both components

        layout = new VerticalLayout();
        add(layout);
        layout.setWidth("600px");
        layout.getStyle().set("background-color", "#eee");
        layout.setPadding(true);
        layout.addAndExpand(new Button("Button one"), new Button("Button two")); // adds and flex-grows both components
        layout.setHeight("300px");
    }
}

Implement preview versions of <vaadin-horizontal-layout> and <vaadin-vertical-layout>

• Initialize with the Skeleton base
• Both elements (horizontal/vertical layout) should be simple flexbox containers with differing flex-direction value for the :host

Ensure Polymer 3 Modulizer compatibility

See “Generic steps” at vaadin/components-team-tasks#326

Consider removing auto-flex for items

Is flex: 1 1 auto; for the slotted items really beneficial?

https://github.com/vaadin/vaadin-ordered-layout/blob/master/vaadin-vertical-layout.html#L39
https://github.com/vaadin/vaadin-ordered-layout/blob/master/vaadin-horizontal-layout.html#L38

IMO it makes it more difficult for a developer to let one single item flex in the layout (i.e. take all unused space).

Overflow in nested layouts with smaller gaps

If I place a vertical layout with a smaller gap inside another, its content overflows the parent's bounding box: https://jsfiddle.net/heruan/xus5x3jf/1/

Similar issue with the horizontal layout, which overflows on the left.

Increased width of the form-layout items in IE11

The width of the items is dramatically increased (calculated in a wrong way) in IE11 what makes it almost impossible to use.

Add empty state attribute based on presence of the items

Description

As a developer I want to style vaadin-horizontal-layout or vaadin-vertical-layout differently, when it has no items, especially in Designer (i.e. set default min-width / min-height).

Unfortunately there is no easy way to use :empty CSS selector with slots. And we do not yet have custom states for web components in general.

So, the easiest approach for it would be to introduce empty attribute, similar to what we have for vaadin-checkbox and vaadin-radio-button label:

if (this._isAssignedNodesEmpty(assignedNodes)) {
  this.setAttribute('empty', '');
} else {
  this.removeAttribute('empty');
}

Expected outcome

There should be empty state attribute for layouts. Another option would be to use has-items attribute, which is something we previously discussed for vaadin-combo-box

Make it easy to add whitespace between the elements inside the layout (a.k.a. “spacing”)

For convenience, let’s consider adding attributes for defining the spacing between the elements in the layout.

For example:

<!-- Add default spacing -->
<vaadin-vertical-layout spacing>
  ...
</vaadin-vertical-layout>

<!-- Set explicit spacing value -->
<vaadin-vertical-layout spacing="L">
  ...
</vaadin-vertical-layout>

The actual spacing sizes should be controllable with CSS/theme, e.g.

--vaadin-layout-spacing-xs: 4px;
--vaadin-layout-spacing-s: 8px;
--vaadin-layout-spacing-m: 16px;
--vaadin-layout-spacing-l: 32px;
--vaadin-layout-spacing-xl: 64px;

Should extend element-mixin

Introduce combined custom css property.

Can we add one combined custom css property for customising gaps between items in both layouts?
Like vaadin-ordered-layout-gap?

items with absolute size still change size because flex-shrink defaults to 1

Given the following test view, the header and footers do not stay at their allotted sizes. This is because flex-shrink is 1 by default. Setting flex-shrink manually to 0 will lead to expected behaviour.

Should the default be set to 0 to better align with old FW defaults?

@Route("test")
public class ApplicationLayout extends VerticalLayout {

	private final HorizontalLayout layout;

	public ApplicationLayout() {
		final Label header = new Label("This is the header. My height is 150 pixels");
		header.setWidth("100%");
		header.setClassName("header");
		header.setHeight("150px");
		header.getStyle().set("backgroundColor", "red");

		layout = new HorizontalLayout();
		layout.setSizeFull();
		createLabelLayout();

		final Label footer = new Label("This is the footer area. My height is 100 pixels");
		footer.setWidth("100%");
		footer.setClassName("footer");
		footer.setHeight("100px");
		footer.getStyle().set("backgroundColor", "yellow");

		add(header, layout, footer);

		setFlexGrow(1, layout);
		setSizeFull();
	}

	private void createLabelLayout() {
		final Div navigation = new Div();
		navigation.setClassName("navigation");
		navigation.setHeight("100%");
		navigation.getStyle().set("width", "25%");
		navigation.setText("This is the navigation area. My width is 25% of the window.");
		navigation.getStyle().set("backgroundColor", "blue");

		final Div content = new Div();
		content.getStyle().set("width", "75%");
		content.getStyle().set("display", "flex");
		content.setText("This is the content area");
		content.setClassName("content");
		content.setHeight("100%");
		content.getStyle().set("backgroundColor", "green");

		layout.add(navigation, content);
	}

	@Override
	protected void onAttach(AttachEvent attachEvent) {
		super.onAttach(attachEvent);
		getUI().ifPresent(ui -> ui.getPage().executeJavaScript("document.getElementsByTagName('html')[0].style.height = '100%'"));
		getUI().ifPresent(ui -> ui.getPage().executeJavaScript("document.body.style.height = '100%'"));
	}
}

Add a dedicated scrolling container to vaadin-scroller

The scroller component's own size should not be affected by its content. The current structure makes it difficult to build, for instance, layouts with a header/footer and a Scroller in between. Example:

@Route("layout")
public class LayoutRoute extends VerticalLayout {
    public LayoutRoute(){
        setSizeFull();
        Div header = new Div();
        header.setWidth("100%");
        header.setHeight("56px");
        header.getElement().getStyle().set("background-color", "yellow");
//        header.getElement().getStyle().set("flex-shrink", "0");
        add(header);

        Div left = new Div();
        left.setWidth("200px");
        left.setHeight("100%");
        left.getElement().getStyle().set("background-color", "blue");
        left.getElement().getStyle().set("flex-shrink", "0");

        VerticalLayout content = new VerticalLayout();
        content.setWidthFull();

        Scroller scroller = new Scroller();
        scroller.setSizeFull();
        scroller.setContent(content);

        Div right = new Div();
        right.setWidth("200px");
        right.setHeight("100%");
        right.getElement().getStyle().set("background-color", "red");
        right.getElement().getStyle().set("flex-shrink", "0");

        HorizontalLayout hl = new HorizontalLayout(left, scroller, right);
        hl.setSizeFull();
        addAndExpand(hl);

        Div footer = new Div();
        footer.setWidth("100%");
        footer.setHeight("56px");
        footer.getElement().getStyle().set("background-color", "yellow");
        footer.getElement().getStyle().set("flex-shrink", "0");
        add(footer);

        for(int i=0; i<100; i++){
            content.add(new TextField());
        }
    }
}

You'd either need to add overflow: hidden to the parent layout or have the Scroller be absolutely positioned and wrapped inside of another container to have the layout working as expected.

Fix this by doing the wrapping inside the Sroller's own shadow root instead:

<vaadin-scroller>
  # shadow root
    <div style="position: relative; width: 100%; height: 100%">
      <div style="position: absolute; width: 100%; height: 100%; overflow: auto">
        <slot>

The `items are next to each other` test is failing in Android 7.1

https://travis-ci.org/vaadin/vaadin-ordered-layout/builds/447750971

Android GoogleAPI Emulator ✖ test/vertical-layout.html » basic tests » items are next to each other
  expected 22 to be close to 19 +/- 1
    <unknown> at   Context.it at vertical-layout.html:66:0
Android GoogleAPI Emulator ✖ test/vertical-layout.html » basic tests » items are next to each other
  expected 22 to be close to 19 +/- 1
    <unknown> at   Context.it at vertical-layout.html:66:0

Convert to Polymer 3

There are no custom events in any of the included components so this is only about conversion itself.

Horizontal layout does not expand to full width in IE11

It seems that using nested flex container affects IE11:

The same demo in Chrome:

The possible workaround is to set explicit width to 100% by default on the host element.

Follow Vaadin namespace conventions

The JS element name should include the Element suffix and no Vaadin prefix, like all other Vaadin elements:

Vaadin.VaadinHorizontalLayout -> Vaadin.HorizontalLayoutElement

Vaadin.VaadinVerticalLayout -> Vaadin.VerticalLayoutElement

Add private _justifyContent and _alignItems property APIs

As discussed between @platosha @tomivirkki @pleku we need to address the align-items and justify-content CSS properties of the layout from the Flow side. We do not have time in the scope of the first stable release for designing and validating new APIs, so let us add them as private for now, and consider exposing in the next minor (or major).

Add the following private properties in both <vaadin-vertical-layout> and <vaadin-horizontal-layout> elements:

• _alignItems:
  • type: String
  • applies the value to align-items property of the internal layout wrapper,
  • supported values are the same as in the CSS Flexbox 1 spec for align-items: flex-start | flex-end | center | baseline | stretch,
  • default value: stretch as in the CSS Flexbox 1 spec for now, unless decided otherwise in #24
• _justifyContent:
  • type: String
  • applies the value to justify-content property of the internal layout wrapper,
  • supported values are the same as in the CSS Flexbox 1 spec for justify-content: flex-start | flex-end | center | space-between | space-around,
  • default value: flex-start as in the CSS Flexbox 1 spec for now

Fix APIdocs

• APIdocs display properties and functions from Polymer.Element API

Flexbox does not work for HorizontalLayout because of leading ":before"

Flexbox - more specifically JustifyContentMode - does not work for HorizontalLayout because there is a leading "::before" element that is also used for space calculation.

public class Navigation extends HorizontalLayout {
	
	public Navigation() {
		this.setJustifyContentMode(JustifyContentMode.BETWEEN);
		this.setWidthFull();
		
		this.add(new Button("A"));
		this.add(new Button("B"));
	}
}

Result:

<vaadin-horizontal-layout [...] justify-content: space-between;>
	::before
	<vaadin-button tabindex="0" role="button" >A</vaadin-button>
	<vaadin-button tabindex="1" role="button" >B</vaadin-button>
</vaadin-horizontal-layout>

Should be:

<vaadin-horizontal-layout [...] justify-content: space-between;>
	<vaadin-button tabindex="0" role="button" >A</vaadin-button>
	<vaadin-button tabindex="1" role="button" >B</vaadin-button>
</vaadin-horizontal-layout>

Spacing doesn’t work as expected when using `<html dir="rtl">`

The ::before pseudo-element, which is used to offset the spacing from the first item, moves the child element in the wrong direction.

Improve the API docs descriptions for the theme variants (that they technically set CSS properties)

Default margins on an element override gap margin in ShadyCSS

If you place a <vaadin-button> (using Valo theme) in a vaadin ordered layout, the default margin on the button’s host element override the gap margin on polyfilled browsers using ShadyCSS.

Add combined import file

People were willing to see combined import file, like vaadin-ordered-layout.html along with two separated files for layouts elements.

Prototype new structure for ordered layout

Why: the current implementation with the nested flex container does not quite meet the Flow team expectations and API requirements.

What:

• return back to the initial structure (host element is a flex container)
• drop custom CSS property fort gap
  • there should be no gap by default
  • user can apply gaps specified by theme
  • for custom gaps, CSS margin can be still used

HorizontalLayout and FlexComponent.JustifyContentMode.BETWEEN yields unexpected results

@mvysny commented on Fri Apr 20 2018

My use case is to have two child h3 and h4 in a HorizontalLayout, showing a "Welcome" text justified to the left, "App Name" justified to the right. In hopes to achieve that, I have set h3 and h4 to wrap its contents and set the parent HorizontalLayout to "Between", hoping for the HorizontalLayout to add space between those two items, pushing them apart.

However, there is a third item: an invisible ::before which is also considered by the flex layout engine, and hence the flex layout engine distributes space between the ::before and h3.

Please see the screenshot attached. Could it be possible to remove the ::before from HorizontalLayout?

TextField shrinks in Safari in weird way when used in VerticalLayout

Vaadin 14.0.2, latest Safari on desktop. With following code:

@Route
public class MainView extends VerticalLayout {
    public MainView() {
        add(new Span("It works!?"));
        add(new TextField());
        Grid<String> grid = new Grid<>();
        add(grid);
        expand(grid);
        setHeightFull();  
    }
}

Safari renders text field as a thin line when screen size is small:

With Chrome it looks as expected:

Rename vaadin-scroll-container to vaadin-scroller

vaadin-scroll-container

Will be used to provide ScrollContainer Java API in vaadin/vaadin-ordered-layout-flow#108

• Simple slotted component that will display scrollbars when its content is overflowing and can be used in existing layouts.

• Scroll should be auto by default and can be disabled on a specific direction

Add a demo for vaadin-scroller component

There should be at least a simple demo for <vaadin-scroller> which could optionally also explain why the component exists and who it's meant for, just for avoiding confusion because now there is no demo for it.

Afaik initially the demo was intentionally left out since the scroller was not targeted for frontend devs atm but needed for the Java API implementation and for Vaadin Designer support. But the component may also become more useful to frontend first development if more features are added to it.

Fix "main" in bower.json

List both vaadin-vertical-layout.html & vaadin-horizontal-layout.html

Make negative margin not occupy space

The host overflow property should be set to hidden, to avoid the negative margin of the inner container to occupy space.

The negative margin applied on the flex container to compensate the margin of its first and last children occupies space, thus making scrollbars appear if near the viewport edges.

Flaky test in Google Android emulator failing CRON build

The following test is causing CRON build to fail in 100% of cases:

Android GoogleAPI Emulator ✖ test/vertical-layout.html » basic tests » items are next to each other
  expected 22 to be close to 19 +/- 1
    <unknown> at   Context.it at vertical-layout.html:66:0

Change the wording of custom css properties.

Some of DX/UX tests participants were willing not to have words column and row in custom css properties for gaps (--vaadin-vertical-layout-row-gap and --vaadin-horizontal-layout-column-gap). Should we remove those?

iron-list doesn't work inside vertical-layout

Forewarning: I'm not sure whether this is an issue in the vertical-layout component or iron-list.
As I understand the iron-list component is not maintained by Vaadin so I can't say for sure where is the issue.
Sorry if it's not in the vaadin-ordered-layout. I will need assistance anyway in this issue to be able to create a ticket for iron-list if needed since I'm not familiar with client-side stuff.

I have a vaadin-vertical-layout component. Let's say it's referenced as a layout.

Now I use the following code:

var templ = document.createElement('template');
templ.innerHTML="<span><template is='dom-if' if='[[item.__placeholder]]'>[[item.label]]</template><template is='dom-if' if='[[!item.__placeholder]]'>[[item.label]]</template></span>";
var list = document.createElement('iron-list');
list.appendChild(templ);
layout.appendChild(templ);
list.items=[{label: "bar"}]

The result is: nothing is shown in the browser.

Now if I use div instead of vaadin-vertical-layout( solayoutis adivelement) then the same code rendersbar` string as expected.

The original issue comes from Flow with server side component.
In Flow the iron-list client side method _assignModels is redefined and it's expected to be called to trigger Flow engine.
But I see while debugging that the _assignModels method is never called if vertical-layout is used as a parent.
And it's called multiple times if div is used as a parent.

Text fields inside horizontal layout grow unexpectedly

When placing two <vaadin-text-field> components in a <vaadin-horizontal-layout> and one of the fields has an error message, the other field height will grow to fill the entire layout row

Consider adding the following CSS for text-field:

:host {
  align-self: baseline;
}

After that the layout looks like expected:

Generate TypeScript definitions for P3

Child of vaadin/vaadin-core#186