HorizontalLayout with flex-wrap?

Flow
1

Is a Vaadin component available similar to CSS Flexbox Container with flex-wrap: wrap; so items move to another row depending on the available width?

1 Like
2

Just found this similar question How to create a wrapping HorizontalLayout - #3 by Guttorm, but with no real answer…

3

In Vaadin 20+ I use something like the below.
In my case I had to fight a bit extra with Vaadin to reduce the width of the fields.

java:

var layoutRow = new FlexLayout();
layoutRow.setClassName("wrap");

css:

div.wrap {
    display: flex;
    width: 100%;
    gap:0.5em;
    flex-wrap:wrap;
    align-items: baseline;
    box-sizing: border-box;

    /* We want vaadin fields to be at least as wide as their label */
    --vaadin-field-default-width: min-content;

    & vaadin-date-picker > input {
        width: 9ch;
    }

    /* By default, fields in vaadin are pretty wide, and have enough room for most labels. This might be OK in forms, but in Navigators, we want to set narrower field widths, but still not narrower than label */
    /* The below suggested by Rolf Smedstad on Discord; On the server-side we can set a variable in the component style, and then use it in the css below */

    & vaadin-text-field > input {
        width: var(--length, 10ch);
    }

}

With that I get a wrapping component like this:
image

1 Like
4

Thanks @Guttorm, this works perfectly!

5

What speaks against FlexLayout?

1 Like
6

That it’s not documented on Components | Vaadin Docs :slight_smile:
I didn’t know about it…

7

Oh… you are right Document FlexLayout · Issue #2124 · vaadin/docs · GitHub :confused:

1 Like
8

You can also use the utility class if you don’t want to write your own CSS

var hl = new HorizontalLayout();
hl.addClassName(LumoUtility.FlexWrap.WRAP);
1 Like
9

I was quite recently covering this in by blog post/interactive demo app:

https://rwd4j.dokku1.parttio.org/flexboxandcssgrid

In Viritin 2.8.26+ you can also use HorizontalFloatLayout class (not sure about naming, this also applies “baseline” alignment). Even if there are this couple of “oneliner hacks” to accomplish this, I everytime have to take a deep breath to calm down for us not providing a proper (easily findable) solution for this common problem :triumph:

But what would be the correct name for this kind of layout? I’m not confident about “flex” word. I think we can’t change the defaults at least without major release.

1 Like
10

How about LineLayout since it really treats its children as line of text? Another alternative might be InlineLayout since the wrapping is like all children would have display: inline-block.

2 Likes
11

Thanks @Matti , I love your HorizontalLayoutThatWraps approach.

2 Likes
12

InlineLayout, that sounds good to me :+1:

4 Likes