Scrollable panel with centered content

Hi. I’m trying to get a panel centered in the screen, that also shows scroll bars when the screen is small to fit all the panel’s content. So far, I’m only able to get one or the other, but not both things at the same time.

This is some test code:


	public void init() {
		Window mainWindow = new Window("Gridtest Application");
		setMainWindow(mainWindow);

		VerticalLayout layout = new VerticalLayout();
		layout.setSizeFull();
		mainWindow.setContent(layout);

		GridLayout grid = new GridLayout();
		grid.setColumns(5);

		for (int i = 0; i < 30; i++) {
			TextField t = new TextField();
			t.setValue("TEXTFIELD" + i);
			t.setWidth("100px");
			t.setHeight("100px");
			grid.addComponent(t);
		}

		Panel panel = new Panel();
		panel.setWidth("90%");
		panel.setHeight("90%");
		panel.setScrollable(true);

		HorizontalLayout playout = new HorizontalLayout();
		playout.setSizeUndefined();
//		playout.setSizeFull();
		playout.addComponent(grid);
		playout.setComponentAlignment(grid, Alignment.MIDDLE_CENTER);
		panel.setContent(playout);

		layout.addComponent(panel);
		layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
	}

If I set the panel’s content layout to undefined size the scroll bars show if the browser window isn’t big enough but, if it is, the panels occupies the whole screen width and everything is justified to the left. If I set the size to full, the panel only occupies the needed space to fit its content and this is centered, but then no scroll bars appear if I reduce the window.

How could I get both things at the same time? I’ve tried adding two VerticalLayouts on both sides of the external layout or the panel’s layout, playing with the expand ratios, but that didn’t go anywhere either.

Thanks.

I don’t know if this is a bug in vaadin or what. But anyways, in case someone else faces the same problem: I have solved it by adding a “centered” style to the panel and the following lines to my theme’s css:

.v-panel-content-centered-panel .v-horizontallayout {
margin-left: auto;
margin-right: auto;
}

.v-panel-content-centered .v-verticallayout {
margin-left: auto;
margin-right: auto;
}