Scrollbar issue with Panel and AbsoluteLayout

Hello,

First, thanks for such an awesome framework. It works very nicely. Recently, I stumbled upon an issue.

I have a Panel and Panel’s content is AbsoluteLayout. I was unable to have a panel with horizontal and vertical scrollbars. The panel displayed both scrollbars when I used vertical or horizontal layout but no luck with absolute layout.

Please let me know what am I missing. Here is the smaple code.


	@Override
	public void init() {
		Window mainWindow = new Window("Vaadintest Application");
		Label label = new Label("Hello Vaadin user");
		Label label1 = new Label("Hello Vaadin user1, Hello Vaadin user1, Hello Vaadin user1, Hello Vaadin user1, Hello Vaadin user1");
		Label label2 = new Label("Hello Vaadin user2, Hello Vaadin user2, Hello Vaadin user2");
		Label label3 = new Label("Hello Vaadin user3");
		Label label4 = new Label("Hello Vaadin user4");
		Label label5 = new Label("Hello Vaadin user5");
		Label label6 = new Label("Hello Vaadin user5");
		Label label7 = new Label("Hello Vaadin user5");
		Label label8 = new Label("Hello Vaadin user5");
		Label label9 = new Label("Hello Vaadin user5");
		Label label10 = new Label("Hello Vaadin user5");
		Label label11 = new Label("Hello Vaadin user5");
		Label label12 = new Label("Hello Vaadin user5");
		Panel panel = new Panel();
		AbsoluteLayout al;
		panel.setContent(al = new AbsoluteLayout());
//		panel.getContent().setSizeUndefined();
		panel.setSizeFull();
		panel.setScrollable(true);
		VerticalLayout hl = new VerticalLayout();
		hl.addComponent(label);
		hl.addComponent(label1);
		hl.addComponent(label2);
		hl.addComponent(label3);
		hl.addComponent(label4);
		hl.addComponent(label5);
		hl.addComponent(label6);
		hl.addComponent(label7);
		hl.addComponent(label8);
		hl.addComponent(label9);
		hl.addComponent(label10);
		hl.addComponent(label11);
		hl.addComponent(label12);
		al.addComponent(hl);
		mainWindow.setContent(panel);
		//mainWindow.setScrollable(true);
		setMainWindow(mainWindow);
	}

With Regards

Hi,

The AbsoluteLayout being 100% x 100% size will clip any overflowing components and thus prevents any scrollbars from appearing on the Panel. You could try setting the overflow property on the absolute layout to visible with CSS.

Thank you for your help, after setting CSS property “overflow:visible” it does display scrollbars but I see horizontal scrollbar even when it is not needed. Why is horizontal scrollbar displayed event when it is not required?

Regards
Larry

Hard to say without knowing more. Do you have some other CSS defined for the absolute layout (borders, margins, paddings)?

Thanks, I got it working correctly though I have another issue. When I resize the browser window, a part of the bottom of the scrollbar is not visible. If I increase height of the browser window then I see some space between the end of the vertical scrollbar and the window’s bottom border.

Any ideas.

Thanks