VerticalLayout first row fix

I’m trying to achieve the following:

  • VerticalLayout with 100% width and 100% height and two rows
  • First row with fix heigh, lets say 60px.
  • Then use the free space (full height - 60px) for the second row
  • in the second row I want to place a calendar which should use the full height of the second row

I was not able to achieve that, maybe the verticallayout is the wrong layout for this?
Could you give me a hint, please?

Thanks
chris

Here is an example for such a setup[code]
VerticalLayout vl = new VerticalLayout();
vl.setSizeFull();

Panel pnl1 = new Panel();
pnl1.setWidth(“100%”);
pnl1.setHeight(“60px”);
vl.addComponent(pnl1);

Panel pnl2 = new Panel();
pnl2.setSizeFull();
vl.addComponent(pnl2);
vl.setExpandRatio(pnl2, 1f);
[/code]This panels can be replaced with any component like a Calendar, layout, …etc.

Disclaimer: This code was written without an IDE so there might be syntax errors,

Hallo Marius

Please see the attachment first. The problem here is still the same as I had. The VerticalLayout will be divided into two half with each 50% height. The Panel of the Navigation above has now 60px, that’s nice but still the calendar below does not start after this 60px.

I know about the setExpandRatio to have another ratio as 50/50 but the problem with this is, I would never have exactly 60px for the navigation.

Any ideas?
thx
13192.png

In that case: Could you post a bit of code to explain how you’re setting up the layout right now? …because the code i posted worked totally fine for me.

Changed my code a bit to resemble your requirements a bit better:[code]
VerticalLayout vl = new VerticalLayout();
vl.setSizeFull();

	VerticalLayout menulayout = new VerticalLayout();
	menulayout.setWidth("100%");
	menulayout.setHeight("60px");
	vl.addComponent(menulayout);
	MenuBar menu;
	menulayout.addComponent(menu = new MenuBar());
	menu.addItem("Home", new Command() {
		@Override
		public void menuSelected(MenuItem selectedItem) {
			System.out.println("Do at least something!");
		}
	});
	menu.addItem("Kalender", new Command() {
		
		@Override
		public void menuSelected(MenuItem selectedItem) {
			System.out.println("Zu Kalender wechseln.");
		}
	});
	Calendar calendar = new Calendar();
	calendar.setSizeFull();
	vl.addComponent(calendar);
	vl.setExpandRatio(calendar, 1f);

[/code]

Hi Marius
Thank you very much, it’s working now. 1f helped.

vl.setExpandRatio(calendar, 1f);