Vaadin 14: setFlexGrow for HorizontalLayout and VerticalLayout within the s

Flow
1

Hello.

I am trying to set up a VerticalLayout with setFlexGrow 0.5 and a HorizontalLayout with setFlexGrow 1, both of which are within a main HorizontalLayout.

But I can’t make this setting work unless it’s 2 HorizontalLayout.

Ex1: This one works.

public class TesteTela2 extends HorizontalLayout{
	private static final long serialVersionUID = 1L;
		
	public TesteTela2() {
		setSizeFull();
		getStyle().set("border", "5px solid green");
		
			HorizontalLayout component1 = new HorizontalLayout();
			component1.getStyle().set("border", "5px solid red");
			setFlexGrow(0.5, component1);
	
			HorizontalLayout component2 = new HorizontalLayout();
			component2.getStyle().set("border", "5px solid red");
			setFlexGrow(1, component2);
	
			add(component1, component2);
	}
}

Ex2: This does not work.

public class TesteTela2 extends HorizontalLayout{
	private static final long serialVersionUID = 1L;
		
	public TesteTela2() {
		setSizeFull();
		getStyle().set("border", "5px solid green");
		
			VerticalLayout component1 = new VerticalLayout();
			component1.getStyle().set("border", "5px solid red");
			//component1.setSizeFull();
			//expand(component1);
			setFlexGrow(0.5, component1);
	
			HorizontalLayout component2 = new HorizontalLayout();
			component2.getStyle().set("border", "5px solid red");
			//component2.setSizeFull();
			//expand(component2);
			setFlexGrow(1, component2);
	
			add(component1, component2);
	}
}

Am I forgetting some command?

NOTE: The commented codes were my attempts.
17823364.png

2

This might have to do with the VerticalLayout having 100% width by default, while HorizontalLayout has not (compare their constructors). This is only a guess as I’m not too savy with Flex, but this seems to me like the most relevant difference between the two layout Components.

Try Ex2 again with this added line: component2.setWidth("100%");

3

It didn’t work. this it evenly distributes the width and ignores the setFlexGrow setting.

I also tried to add component1 inside another HorizontalLayout. This way setFlexGrow is obeyed, but component1 does not appear.

The solution was to create the 2 components as FlexLayout and the first set up with

getStyle().Set("flex-direction", "column");

Unfortunately I couldn’t set up a VerticalLayout and a HorizontalLayout with setFlexGrow in the parent of both.

4

What if you set the VerticalLayout’s width to undefined (setWidth(null)) instead?

5

Olli Tietäväinen:
What if you set the VerticalLayout’s width to undefined (setWidth(null)) instead?

cool, it worked!

Is this a standard behavior? Have to keep setting the width, and when are 2 horizontal layout do not need?

6

The way I figure it works: If you use flex-grow, the components need to be unsized in the direction of the container’s primary axis. If you’d have plain unstyled <div> elements, you would be letting FlexBox control the sizes and everything would work as FlexBox governs it. However, sometimes you might have a fixed-size element. From FlexBox’s point of view this means that the element knows better what size it should be, so FlexBox doesn’t touch it. VerticalLayout has a default fixed width of 100% because of historical reasons and/or because it makes sense for a VerticalLayout to take all the width it has available. Thus, in a flex-direction: row case flex-grow doesn’t do anything to it, the fixed width is a stronger instruction.

7

Olli Tietäväinen:
The way I figure it works: If you use flex-grow, the components need to be unsized in the direction of the container’s primary axis. If you’d have plain unstyled <div> elements, you would be letting FlexBox control the sizes and everything would work as FlexBox governs it. However, sometimes you might have a fixed-size element. From FlexBox’s point of view this means that the element knows better what size it should be, so FlexBox doesn’t touch it. VerticalLayout has a default fixed width of 100% because of historical reasons and/or because it makes sense for a VerticalLayout to take all the width it has available. Thus, in a flex-direction: row case flex-grow doesn’t do anything to it, the fixed with is a stronger instruction.

The explanation was enlightening, thanks!