Help on overflow hidden and scrollbars

Hello,

Its not very clear to me that how to get scroll-bars in appropriate layouts. For a better understanding of my question, please take a look at the simple test application that I created - http://test-vaadin.appspot.com/ It has three sub components header, body and footer (code given below) inside a VeritcalLayout. Body has large enough data that it takes more space than the available height. This makes the footer invisible and cuts some content of the body label. Basically, I have two questions:

  1. How to modify the components so that a scroll-bar appears just for the body content? That is, header and footer should be visible at all times and the body content should be scroll-able.

  2. How to modify the components so that a scroll-bar appears on the whole page? That is, the footer should be down below but a scroll-bar should allow to go down and the see the rest of the content in the body and the footer.

Thanks!

package com.example.testgae;

import com.vaadin.Application;
import com.vaadin.terminal.Sizeable;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class TestgaeApplication extends Application {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	public void init() {
		Window mainWindow = new Window("Testgae Application");
		final VerticalLayout verticalLayout = new VerticalLayout();
		verticalLayout.setHeight(100, Sizeable.UNITS_PERCENTAGE);
		verticalLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		
		//Header
		VerticalLayout headerLayout = new VerticalLayout();
		headerLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		headerLayout.setHeight(60, Sizeable.UNITS_PIXELS);
		Label header = new Label("<center><h2>Hello, I am the header!</h2></center>", Label.CONTENT_XHTML);
		headerLayout.addComponent(header);
		verticalLayout.addComponent(headerLayout);
		
		//Body
		VerticalLayout bodyLayout = new VerticalLayout();
		bodyLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		bodyLayout.setHeight(100, Sizeable.UNITS_PERCENTAGE);
		Label body = new Label("1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"7. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"8. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"9. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"10. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"11. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"12. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"13. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
				"</br></br>" +
				"14. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", Label.CONTENT_XHTML);
		bodyLayout.addComponent(body);
		verticalLayout.addComponent(bodyLayout);
		verticalLayout.setExpandRatio(bodyLayout, 1.0f);
		
		//Footer
		VerticalLayout footerLayout = new VerticalLayout();
		footerLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		footerLayout.setHeight(100, Sizeable.UNITS_PERCENTAGE);
		Label footer = new Label("<center>Hello, I am the footer!</center>", Label.CONTENT_XHTML);
		footerLayout.addComponent(footer);
		verticalLayout.addComponent(footerLayout);
		
		mainWindow.setContent(verticalLayout);
		setMainWindow(mainWindow);
	}
}

Hi,

The core layouts don’t provide scrollbars for any overflowing content, it always gets clipped. Only the Window, TabSheet, Accordion, SplitPanel and Panel components provide scrollbars for their content.

So in your case, you need to switch the bodyLayout to a Panel in order to get scrollbars only on the body part.

For the other situation (scrollbar for whole page), you need to remove verticalLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);

Hope this helps!

Thanks Jouni!

Your solution for creating a scrollbar in the body part by changing the bodyLayout to a Panel worked perfectly well.

However, for creating a scrollbar on the whole page, if I remove the setHeight on the verticalPanel (you have written setWidth but I think you meant setHeight? setWidth has not effect…) a scrollbar appears on the whole page but running Analyze Layouts for the application gives an error as follows:

Vaadin DEBUG

  • Window/76c5d9c1 “Testgae Application” (height: MAIN WINDOW)
    • VerticalLayout/7059c8b5 (height: UNDEFINED)
      • VerticalLayout/375b4ad2 (height: RELATIVE, 100.0 %)
        Layout problem detected: Component with relative height inside a VerticalLayout with no height defined.

This is because the height is now undefined. Any ideas on how to circumvent this?

You’re right, I did of course mean setHeight. Sorry.

As you see from the layout analysis, you also need to remove the height from the bodyLayout as well as the verticalLayout.

Bingo! That works. Thanks!