FormLayout with rowSpan? Or flex with flex-direction:column?

I have a case where FormLayout would be perfect, with the exception of one Component needing to span multiple rows. That capability doesn’t exist. Another option that would work is flex-direction:column, but FormLayout doesn’t seem to use flex layout.

I know I am asking a lot, given the complexity of the layout code in the vaadin-form-layout.js. Adding rowSpan would be tricky.

I am thinking of using the FlexLayout instead, and just rolling my own responsive css. Is that the best option or am I missing something?

GridLayout would work too, if it still existed. Maybe one of the 3rd party GridLayouts?

gridLayouts are not direclty available but there are some addon or you can use LumoUtility grid css classes

could you share a picture of the layout you’re trying to achieve?

(FormLayout does use FlexBox internally btw, but in significantly more complex ways than just being a flexbox)

Simple Form layout with 1 or 2 columns. Some cells may want a colspan=2. Some (one) cells may want a rowspan > 1 (in my case, an image). Row-first flex cannot handle a rowspan > 1. Column-first flex will not horizontally align adjacent cells (unless all the heights are perfectly matched) A Table layout gives the correct layout but is not responsive. A Grid layout works, but then you have to work out the css for a responsive 1 or 2 column situation (which is the way I am going to try next).
image.png
image.png

I would go with two Formlayouts, one left and one on the right side and using flex layout to wrap both. this would allows both layouts to wrap once the screen gets narrow

With two FormLayouts, you lose horizontal alignment between the components in the left layout and in the right.

A dynamic height image of a user probably won’t help either :sweat_smile:

Images always need some work to maintain the size ratio. And I am fine (luckily) setting a maximum size for them because the form looks awful if you allow the image size to vary. I actually got it working nicely with the following:

/* A grid layout for forms. Will be responsive with 1, 2 or 3 columns, based on the width of the parent element. /
/
min-width set to 500px because that supports the widest component I have inside a form. Need to tweak for narrower forms. */

div.grid-form-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 20px;
}

/* A grid-form-layout can contain ONE and ONLY one image-component. It gets the special top-left slot.
Manually tweaked height and number of rows to gets these numbers.
*/

div.grid-form-layout > div.image-component {
grid-row: 1 / 6;
grid-column: 1 / 1;
max-height: 380px;
}

/* For images, we wrap an img element inside a div */

div.image-component {
overflow: hidden;
}

div.image-component > img {
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}

With two FormLayouts, you lose horizontal alignment between the components in the left layout and in the right.

Actually, you don’t. FormLayout does not auto-size the label column. It’s a customizable fixed-width thing. 2 FormLayouts side-by-side (with the image not part of either) is the way to go.

Two FormLayouts only work when all the components have the same height. Otherwise, the left components will not align with the right components. And because of those different heights, you can’t figure out how many components to put into each FormLayout. It breaks the responsive approach (adding items to a list (or lists) in the java code and using css to figure out the layout).

And if the image is not part of either, what is the overall layout? Image, FormLayout, FormLayout in a flex?

Yes, exactly that, why not?

FormLayout is intended for input fields, so it’s not a good fit for images etc. Even if the images is used as an input field, it doesn’t have to be in a FormLayout.

What I see in your screenshots is a form with two distinct columns of fields, where the user moves first down one column, then the next. Having a separate FormLayout for each column makes perfect sense in that case.

If you absolutely need to have fields in both columns line up with each other, then you probably do need to do something custom e.g. with css grid.