1

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);
richard
  • 724
  • 2
  • 14
  • 36
  • "did not work" can mean anything. care to elaborate on this? for sane scrolling behaviour i'd rather go with a `Panel (100% height & 1 expandRatio) and place the layout within. – cfrick Jan 21 '15 at 14:35
  • the second child gets longer than the remaining space when i add content to it. it is not cut as i expected it, and no scrollbars appear. the whole project is more complicated, i need VerticalLayout. i just removed everything unnecessary, to describe my problem. – richard Jan 21 '15 at 14:53
  • have you tried with a Panel? – cfrick Jan 21 '15 at 15:01
  • that would be quite much work, because the project is already quite advanced. anyway even without scrolling the problem is existing. child2 simple does not get "cut" with the overflow-y attribute, if i set it to hidden. child2 is as high as its content, and ignored the remaining space. well if nothing helps i can try it with a panel, but it can not really understand why its height should behave different. – richard Jan 21 '15 at 15:04
  • if i set the height of child2 to a fix pixel value, then everything is just as expected. there is only a problem with the hight calculation. – richard Jan 21 '15 at 15:06
  • well it's hard to imagine, what you are after, if you only show the bare minimum of code here. to my understanding the usecase here would be to have a fixed sized header area with 200px and a "content" area filling the remainder of the page and show scrollbars? – cfrick Jan 21 '15 at 15:07
  • yes, exactly. thats what i want. actually its just the left menu-part of the window. in the real code those components are custom components. it would not make it more clear to post the full code. – richard Jan 21 '15 at 15:10
  • 1
    Then the same applies from http://stackoverflow.com/questions/27940668/vaadin-basic-layout-fixed-header-and-footer-scrollable-content . Use a Panel. The code change is about four lines. – cfrick Jan 21 '15 at 15:16
  • 1
    just put child2 in your example above into a panel and add the panel instead of child2 to the root. i really can not imagine a UI, where this would be such a showstopper... – cfrick Jan 21 '15 at 15:23
  • 1
    wow, really it works. i could not believe before;-) please write this information as answer so that i can mark your answer as right answer. – richard Jan 21 '15 at 15:35

1 Answers1

2

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

MarcelloGarini
  • 599
  • 2
  • 13