CODEWITHSUNDEEP
layoutvaadinvaadin7
richard
richard

Reputation: 854

filling available space inside a vertical layout

in my vaadin project i have a vertical layout (with the height 100%), with two other vertical layouts inside. the fist one has a fixed height, while the second one should fill the remaining space of the browser-window. it will have a bigger height than the remaining space and has an overflow-y: scroll css-attribute. i tried this with the method setExpandRatio but did not work (the height was often more than the remaining space). can i achieve this just with vaadin, or do i have to use javascript for this?

AbstractOrderedLayout root = new VerticalLayout();
root.setHeight(100, Unit.PERCENTAGE);
AbstractOrderedLayout child1 = new VerticalLayout();   
AbstractOrderedLayout child2 = new VerticalLayout();  

child1.setHeight(200, Unit.PIXELS);
root.addComponent(child1);

child2.setHeightUndefined(); 
root.addComponent(child2); // child2 will be filled with items. if its higher than the remaining space, it should be scrollable (overflow-y: auto)
// root.setExpandRatio(child2, 1F);

Upvotes: 1

Views: 4071

Answers (1)

MarcelloGarini
MarcelloGarini

Reputation: 599

So if i've understood right you would like to have a first area with fixed height and a second area that could be bigger than remaining height so it needs to scroll.

If that's the case, here's the layout

  • VerticalLayout"Main" (sizeFull)

    • VerticalLayout"1" (width 100%, height fixed): fill this layout with your fixed height content
    • Panel (sizeFull + setExpandRation on VerticalLayoutMain to 1)
      • VerticalLayout"2" (width100%, heightUndefined): fill this layout with your other content

Regards

Upvotes: 2

Related Questions