Layout formatting

Hi everyone, I’m doing a web app with Vaadin and there is something that I simply cant figure how to achieve.

I have a Vertical Layout with 75% Width displaying correctly. Inside it I have a Horizontal Layout with 35px height and 100% of his parent width, which also displays correctly.

The problem is that inside this Horizontal Layout I want another small horizontal layout with height 25px and width 50px aligned at the right of the horizontal layout. And a Label aligned to the left which takes all the remaining space.

Right now I have the Label with 100% width and the small horizontal layout with it’s size specified (25px height, 50px width) and aligned to MIDDLE_RIGHT.

The problem is that is being rendered with some kind of 50% wrapper. The small horizontal layout has its dimensions right, but it has a parent element that has 50% widht.

What I’m trying to achieve is this:

https://jsfiddle.net/gjuy1bjd/

Instead I’m achieving this:

https://jsfiddle.net/1qxg4y7o/

Is this possible with Vaadin or I’m simply doing it wrong?

Many thanks!

Hi!

Expand ratio should fix your problem. Something like this:

horizontalLayout.setExpandRatio(label, 1); If you only have one component with expand ratio set, all the extra space goes to that component. The flip side is that if you run out of space, that same component is the one that gets cut off.

Replied many time later, sorry.

Indeed, your solution is perfectly correct. Many thanks :slight_smile: