I’m having a hard time with something I first thought was simple. I’m putting two different size vertical layouts inside a horizontal layout. The horizontal layout should be as small as possible - determined by the bigger vertical layout. What I’m trying to accomplished is to make the smaller layout take up the whole space, measured vertically, available for it. I’ve put a background color to emphasize them and that background boxes should be equally high.
Only solution I found was to have the smaller layout, on the right with height 100% and the bigger one with undefined height, but that breakes the “relative height inside undefined” -rule.
Any ideas on how I set them both equally high?
Java:
public void init() {
Window mainWindow = new Window("Playground2 Application");
setMainWindow(mainWindow);
setTheme("playground2theme");
HorizontalLayout hl = new HorizontalLayout();
VerticalLayout vl1 = new VerticalLayout();
VerticalLayout vl2 = new VerticalLayout();
vl1.setStyleName("green");
vl2.setStyleName("green");
vl1.addComponent(new TextField("Foo"));
vl1.addComponent(new TextField("Bar"));
vl1.addComponent(new TextField("Baz"));
TextField tf = new TextField("Bar");
vl2.addComponent(new TextField("Foo"));
vl2.addComponent(tf);
hl.addComponent(vl1);
hl.addComponent(vl2);
hl.setSpacing(true);
hl.setWidth("100%");
mainWindow.addComponent(hl);
}
Actually it does not break the rules as the first vertical layout will define the height of the horizontal layout. The second vertical layout can then be 100% high because its parent (the horizontal layout) has a defined height (defined by first vertical layout) even though it is not explicitly defined in pixels. So it should work just fine.
Actually, if I add vl2.setHeight(“100%”); it looks fine but I get this from analyze layouts in the debug window:
Following relative sized components where rendered to zero size container on client side. Note that these are not necessary invalid states. Just reported here as they might be.
Vertically zero size:
VVerticalLayout inside VHorizontalLayout
It is only a warning, but still not a nice thing. It also says that it was rendered to zero size - when it wasn’t.
Additionally I’m not so fond of the fact that I have to know in the code which one is smaller to render them correctly. The layout also breaks if vl2 happens to grow over the size of vl1.
I guess I’m just looking for some magic, heroic solution that has the correct height in all cases and where I don’t have to specify expand ratios to get it look good (I have to put expand on the last component of the smaller layout to get it nice and compact). I guess that solution does not exist. :unsure:
Allright, so the solution derived out of this discussion in its whole, if someone is wondering the same, is here:
public void init() {
Window mainWindow = new Window("Playground2 Application");
setMainWindow(mainWindow);
setTheme("playground2theme");
HorizontalLayout hl = new HorizontalLayout();
VerticalLayout vl1 = new VerticalLayout();
VerticalLayout vl2 = new VerticalLayout();
vl1.setStyleName("green");
vl2.setStyleName("green");
vl1.addComponent(new TextField("Foo"));
vl1.addComponent(new TextField("Bar"));
vl1.addComponent(new TextField("Baz"));
vl2.addComponent(new TextField("Foo"));
TextField tf = new TextField("Bar");
vl2.addComponent(tf);
vl2.setHeight("100%");
vl2.setExpandRatio(tf, 1);
hl.addComponent(vl1);
hl.addComponent(vl2);
hl.setSpacing(true);
hl.setWidth("100%");
mainWindow.addComponent(hl);
}
The only things i added is the rows vl2.setHeight(“100%”); and vl2.setExpandRatio(tf,1);. The expand ratio is there so that vl2 won’t divide its’ space evenly between all the components in it. This happens now when the height is larger than it has to be (100%). The expand ratio makes the space for the last component as big as possible which will in turn push all the components to the top as compactly as possible.
