Hi ,
I am using four vertical layouts
- Main Layout
- Top Layout
- Middle Layout
- 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() {
setStyleName("v-vlayout-top-layout");
setHeight("10%");
}
}
Here is the code of Moddle Layout
public class MiddleLayout extends VerticalLayout {
public void initialize() {
setStyleName("v-vlayout-middle-layout");
HorizontalSplitPanel horizontalSplitPanel=new HorizontalSplitPanel();
horizontalSplitPanel.setHeight("80%");
Accordion accordion=new Accordion();
horizontalSplitPanel.setFirstComponent(accordion);
horizontalSplitPanel.setSplitPosition(20);
addComponent(horizontalSplitPanel);
setSizeFull();
}
}
Here is the code of Bottom Layout
public class BottomLayout extends VerticalLayout {
public void initialize() {
setStyleName(“v-vlayout-bottom-layout”);
setHeight(“10%”);
}
}
Here is the code of Main Layout
public class MainLayout extends VerticalLayout {
public void initialize() {
TopLayout topLayout = new TopLayout();
topLayout.initialize();
MiddleLayout middleLayout = new MiddleLayout();
middleLayout.initialize();
BottomLayout bottomLayout = new BottomLayout();
bottomLayout.initialize();
addComponent(topLayout);
addComponent(middleLayout);
addComponent(bottomLayout);
setComponentAlignment(topLayout, Alignment.TOP_LEFT);
setComponentAlignment(middleLayout, Alignment.MIDDLE_LEFT);
setComponentAlignment(bottomLayout, Alignment.BOTTOM_LEFT);
setExpandRatio(middleLayout, 1.0f);
setStyleName("v-vlayout-main-layout");
setMargin(true);
setHeight("100%");
}
}
Thanking u
