CODEWITHSUNDEEP
javaflexboxvaadin-flow
NickJ
NickJ

Reputation: 9579

Vaadin 13 Flex Grow

I am having trouble with a Vaadin HorizonalLayout - I want the left component to fill most of the horizontal space, as shown in this Fiddle

However, when I run my Vaadin app, the two components divide the screen equally.

My code:

    HorizontalLayout layout = new HorizontalLayout();
    VerticalLayout left = new VerticalLayout(new Span("LEFT"));
    VerticalLayout right = new VerticalLayout(new Span("RIGHT"));

    layout.add(left, right);
    layout.setPadding(false);
    layout.setMargin(false);
    layout.setFlexGrow(1.0, left);
    layout.setFlexGrow(0,right);

What am I doing wrong?

Upvotes: 2

Views: 1596

Answers (1)

codinghaus
codinghaus

Reputation: 2358

It works if you give the HorizontalLayout's width a defined value (like 100%) while setting the width of the contained VerticalLayouts to undefined ("as little as possible"):

HorizontalLayout layout = new HorizontalLayout();
layout.setWidthFull();
VerticalLayout left = new VerticalLayout(new Span("LEFT"));
VerticalLayout right = new VerticalLayout(new Span("RIGHT"));
left.setSizeUndefined();
right.setSizeUndefined();

layout.add(left, right);
layout.setPadding(false);
layout.setMargin(false);
layout.setFlexGrow(1.0, left);
layout.setFlexGrow(0,right);
add(layout);

Result:

enter image description here

Upvotes: 2

Related Questions