Component sizing and alignment

Hi ,

I am using four vertical layouts

  1. Main Layout
  2. Top Layout
  3. Middle Layout
  4. Bottom Layput

Among these layouts, am adding Top Layout, Middle Layout, Bottom Layout to Main Layout.
and i set the
Top Layout height to 10%
Bottom Layout to 10%
and Middle Layout to 80%

And Main Layout to 100%

but middle layout not taking the remaining available space of Main Layout.

Here i attached screen and the source code.

Here is the code of Top Layout

public class TopLayout extends VerticalLayout {

    public void initialize() {



Here is the code of Moddle Layout

public class MiddleLayout extends VerticalLayout {

public void initialize() {

    HorizontalSplitPanel horizontalSplitPanel=new HorizontalSplitPanel();
    Accordion accordion=new Accordion();


Here is the code of Bottom Layout

public class BottomLayout extends VerticalLayout {

public void initialize() {

Here is the code of Main Layout

public class MainLayout extends VerticalLayout {

public void initialize() {

    TopLayout topLayout = new TopLayout();

    MiddleLayout middleLayout = new MiddleLayout();

    BottomLayout bottomLayout = new BottomLayout();


    setComponentAlignment(topLayout, Alignment.TOP_LEFT);
    setComponentAlignment(middleLayout, Alignment.MIDDLE_LEFT);
    setComponentAlignment(bottomLayout, Alignment.BOTTOM_LEFT);
    setExpandRatio(middleLayout, 1.0f);


Thanking u


Your attached source code is not the same as you explained. At least the middle layout is set to fullSize in code and in your explanation you talk about 80%. Also by using relative heights and expand ratio should leave only the middle layout visible and top and bottom hidden. Isn’t that the case?

I’m not sure what you want, but option 1) set top and bottom as some fixed px height. Set middle as 100% height and set expand ratio to middle layout.
Option 2. If you want relative heights and expanding middle layout. Set top, middle and bottom as 100% height and set expand ratios for each as 1.0, 8.0 and 1.0 respectively.

Hi Johannes Hayry,

You catched me in the right place in source code. actually after doing the last change in code as present in source code. i did not checked the output screen, after when i run and checked it, only the middle layout was showing top and bottom were not visible as u said in first statement.

My requirment was Top and Botton layout to take some percent of size from MainLayout and MiddleLayout to take remaining avilable space of MainLayout whatever left after Top and Bottom layouts.

My requirment worked fine with the Option 1 which u have given.

Thank you Mr,Johannes Hayry