FormLayout , align-items and the shadow-root

Hi,
I am new to Vaadin and a bit overwhelmed.

I am attempting to have a component that has three differently sized components - next to each other, if there is enough room, below each other e.g. for mobile screens. I achieved this using the FormLayout and it works well.
However, the components are using the “align-items:baseline” layout, despite my attempts to configure “align-items:flex-start”.

public class BestiariumCreaturePageTest extends VerticalLayout implements HasUrlParameter<String> {
	
	//-------------------------------------------------------------------
	public BestiariumCreaturePageTest() {
	}

	//-------------------------------------------------------------------
	/**
	 * @see com.vaadin.flow.router.HasUrlParameter#setParameter(com.vaadin.flow.router.BeforeEvent, java.lang.Object)
	 */
	@Override
	public void setParameter(BeforeEvent event, String id) {
		// Image
		Image image = new Image("frontend/images/splittermond/stoneimp.png", "Stone Imp");
		
		// Description
		Label desc = new Label();
		desc.setText("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.");
		desc.setSizeFull();

		FormLayout layout = new FormLayout();
		layout.getStyle().set("align-items", "flex-start");
		layout.add(new Label("Hello World"));
		layout.add(image);
		layout.add(desc);
		layout.setResponsiveSteps(
		        new ResponsiveStep("21em", 1),
		        new ResponsiveStep("42em", 2),
		        new ResponsiveStep("63em", 3));
			
		add(layout);
	}
}

The visual result is (attached):

I noticed that the CSS property “align-items” is ignored and that the real setting is in the #layout selector of the #shadow-root. I also read, that that style cannot be influenced by global CSS.

Is there any way I can easily that the elements of the FormLayout are top-aligned?

Thanks in advance

Edit: Vaadin 14.3.1
18384071.png

Okay, the answer was easy: Add the style property “align-self:flex-start” to all items in the FormLayout.

Hi Stefan,

FormLayout is really great for components that has a label and the FormLayout can dynamically move labels between left side and above to components.

If you’re not using labels, and it doesnt seem that you do, the following components will probably be better to use for layout:

  • FlexLayout
  • HorizontalLayout (but you have to turn on wrapping manually.
  • Board (but thats a professional component)

That being said, FormLayout may just work beautifully, but in the past it had some problems with complex content on certain devices like Microsoft Edge and Safari.

Cheers
Martin