How to add scroll bar in page

I am facing one issue to add scroll bar for whole page.

In that page I am using tab-sheet and tree-table. when, i am expanding tree table it’s size is fixed. I want to increase that tree table frame size dynamically.

Any help in this context is aprreciated. Awaiting response from the forum guys…

Snippet of the code as below:

private void showInfraStructurePage() {

	AbsoluteLayout mainLayoutForInfraStructurePage = new AbsoluteLayout();
	mainLayoutForInfraStructurePage.setWidth("990px");
	mainLayoutForInfraStructurePage.setHeight("96%");
	mainLayoutForInfraStructurePage.setStyleName("mainLayoutForInfraStructurePageStyle");

	AbsoluteLayout outerLayoutForInfrastructureTab = new AbsoluteLayout();
	outerLayoutForInfrastructureTab.setWidth("990px");
	outerLayoutForInfrastructureTab.setStyleName("outerLayoutForInfrastructureTabStyle");

	Label topBorderImage, vmwareLogo,displayInfoLabel,peerGroupImage;
	TabSheet tabSheet = new TabSheet();
	tabSheet.setStyleName("tabPannelSheet");
	tabSheet.setWidth("940px");
	tabSheet.setHeight("100%");
	Button backToLogin = new Button("Clik back to login page");
	tabSheet.addTab(withHierarchicalContainerWrapper()).setCaption("Infrastructure Configuration");
	tabSheet.addTab(new Label("Under Construction")).setCaption("Efficiency");
	tabSheet.addTab(new Label("Under Construction")).setCaption("Agility");
	tabSheet.addTab(new Label("Under Construction")).setCaption("Quality of Service");
	tabSheet.addTab(backToLogin).setCaption("vSphere 5 vRAM Pools");

	backToLogin.addListener(new ClickListener() {
		public void buttonClick(ClickEvent event) {
			getMainWindow().setContent(new LoginWindow());
		}
	});

	/*tabSheet.addTab(new Label("Under Construction"), "Save Data", new ThemeResource("../images/icon-savedata.png"));
	tabSheet.addTab(new Label("Under Construction"), "Export CSV", new ThemeResource("../images/icon-exportcsv.png"));
	tabSheet.addTab(new Label("Under Construction"), "Add Server", new ThemeResource("../images/icon-addserver.png"));*/

	topBorderImage = new Label();
	topBorderImage.setImmediate(false);
	topBorderImage.setIcon(new ThemeResource("../images/topborder.gif"));
	mainLayoutForInfraStructurePage.addComponent(topBorderImage);

	vmwareLogo = new Label();
	vmwareLogo.setImmediate(false);
	vmwareLogo.setWidth("540px");
	vmwareLogo.setHeight("38px");
	vmwareLogo.setIcon(new ThemeResource("../images/logo.gif"));
	mainLayoutForInfraStructurePage.addComponent(vmwareLogo,"top:42.0px;left:25.0px;");

	displayInfoLabel = new Label();
	displayInfoLabel.setImmediate(false);
	displayInfoLabel.setWidth("-1px");
	displayInfoLabel.setHeight("-1px");
	displayInfoLabel.setValue("How do I stack up against my peer group? ");
	mainLayoutForInfraStructurePage.addComponent(displayInfoLabel,"top:42.0px;right:70.0px;");

	peerGroupImage = new Label();
	peerGroupImage.setImmediate(false);
	peerGroupImage.setWidth("-1px");
	peerGroupImage.setHeight("-1px");
	peerGroupImage.setIcon(new ThemeResource("../images/icon-peergroup.png"));
	mainLayoutForInfraStructurePage.addComponent(peerGroupImage,"top:40.0px;right:50.0px;");

	Panel tabSheetPanel = new Panel();
	tabSheetPanel.addComponent(tabSheet);
	mainLayoutForInfraStructurePage.addComponent(tabSheetPanel, "top:93.0px;");

	outerLayoutForInfrastructureTab.addComponent(mainLayoutForInfraStructurePage);

	Label copyrightLabel = new Label();
	copyrightLabel.setImmediate(false);
	copyrightLabel.setWidth("-1px");
	copyrightLabel.setHeight("-1px");
	copyrightLabel.setValue("Copyright © 2010 VMware, Inc. All rights reserved .");		
	outerLayoutForInfrastructureTab.addComponent(copyrightLabel,"top:660.0px;left:25.0px;");

	Link contactLink = new Link("Contact Us",new ExternalResource("http://www.vmware.com/company/contact/"));
	contactLink.setStyleName("onlyRemoveUnderLineStyle");
	contactLink.setWidth("-1px");
	contactLink.setHeight("-1px");
	contactLink.setDescription("Contact Us");
	outerLayoutForInfrastructureTab.addComponent(contactLink, "top:660.0px;left:310.0px;");

	Link legalLink = new Link("Legal",new ExternalResource("http://www.vmware.com/help/legal.html"));
	legalLink.setStyleName("footerLabelDesignStyle");
	legalLink.setImmediate(false);
	legalLink.setWidth("-1px");
	legalLink.setHeight("-1px");
	legalLink.setDescription("Legal");
	outerLayoutForInfrastructureTab.addComponent(legalLink, "top:660.0px;left:385.0px;");

	// privacyLink
	Link privacyLink = new Link("Privacy  ",new ExternalResource("http://www.vmware.com/help/privacy.html"));
	privacyLink.setStyleName("footerLabelDesignStyle");
	privacyLink.setDescription("Privacy  ");
	privacyLink.setImmediate(false);
	privacyLink.setWidth("-1px");
	privacyLink.setHeight("-1px");
	outerLayoutForInfrastructureTab.addComponent(privacyLink, "top:660.0px;left:435.0px;");

	// accessiibityLink
	Link accessiibityLink = new Link("Accessibily",new ExternalResource("http://www.vmware.com/help/accessibility.html"));
	accessiibityLink.setStyleName("footerLabelDesignStyle");
	accessiibityLink.setDescription("Accessibily");
	accessiibityLink.setImmediate(false);
	accessiibityLink.setWidth("-1px");
	accessiibityLink.setHeight("-1px");
	outerLayoutForInfrastructureTab.addComponent(accessiibityLink,
			"top:660.0px;left:487.0px;");


	// siteLink
	Link siteLink = new Link("siteLink",new ExternalResource("http://www.vmware.com/site_index.html"));
	siteLink.setStyleName("footerLabelDesignStyle");
	siteLink.setDescription("Site Index");
	siteLink.setImmediate(false);
	siteLink.setWidth("-1px");
	siteLink.setHeight("-1px");
	outerLayoutForInfrastructureTab.addComponent(siteLink, "top:660.0px;left:567.0px;");

	// helpLink
	Link helpLink = new Link("Help",new ExternalResource("http://www.vmware.com/help/"));
	helpLink.setStyleName("footerLabelDesignStyle");
	helpLink.setDescription("Help");
	helpLink.setImmediate(false);
	helpLink.setWidth("-1px");
	helpLink.setHeight("-1px");
	outerLayoutForInfrastructureTab.addComponent(helpLink, "top:660.0px;left:625.0px;");

	// feedbackLink
	Link feedbackLink = new Link("FeedBack",new ExternalResource("https://secure.opinionlab.com/ccc01/comment_card.asp?time1=1312887669021&time2=1312887695279&prev=&referer=http%3A%2F%2Fwww.vmware.com%2F&height=900&width=1440&custom_var=undefined"));
	feedbackLink.setStyleName("footerLabelDesignStyle");
	feedbackLink.setDescription("FeedBack");
	feedbackLink.setImmediate(false);
	feedbackLink.setWidth("-1px");
	feedbackLink.setHeight("-1px");
	outerLayoutForInfrastructureTab.addComponent(feedbackLink, "top:660.0px;left:680.0px;");


	Label rssLabel = new Label();
	rssLabel.setImmediate(false);
	rssLabel.setWidth("-1px");
	rssLabel.setHeight("-1px");
	rssLabel.setValue("rss feed");		
	outerLayoutForInfrastructureTab.addComponent(rssLabel,"top:660.0px;left:893.0px;");

	Label rssImage = new Label();
	rssImage.setIcon(new ThemeResource("../images/rss.png"));
	rssImage.setImmediate(false);
	rssImage.setWidth("-1px");
	rssImage.setHeight("-1px");
	rssImage.setValue("");
	outerLayoutForInfrastructureTab.addComponent(rssImage,
			"top:660.0px;left:949.0px;");


	getMainWindow().setContent(outerLayoutForInfrastructureTab);
}

private TreeTable withHierarchicalContainerWrapper() {
	ContainerHierarchicalWrapper containerHierarchicalWrapper = new ContainerHierarchicalWrapper(new IndexedContainer());
	HierarchicalContainerOrderedWrapper hc = new HierarchicalContainerOrderedWrapper(containerHierarchicalWrapper);

	addTestData(hc);

	TreeTable treeTable = new TreeTable();
	treeTable.setWidth("100%");
	treeTable.setHeight("100%");
	treeTable.setSelectable(true);

	treeTable.setContainerDataSource(hc);

	treeTable.setColumnIcon(firstColumn, new ThemeResource("../images/help-icon-64.png"));
	treeTable.setColumnWidth(firstColumn, 173);

	treeTable.setColumnIcon(secondColumn, new ThemeResource("../images/icon-servers.png"));
	treeTable.setColumnWidth(secondColumn, 112);
	treeTable.setColumnAlignment(secondColumn, Table.ALIGN_CENTER);

	treeTable.setColumnIcon(thirdColumn, new ThemeResource("../images/icon-cpu.png"));
	treeTable.setColumnWidth(thirdColumn, 112);
	treeTable.setColumnAlignment(thirdColumn, Table.ALIGN_CENTER);

	treeTable.setColumnIcon(fourthColumn, new ThemeResource("../images/icon-ram.png"));
	treeTable.setColumnWidth(fourthColumn, 112);
	treeTable.setColumnAlignment(fourthColumn, Table.ALIGN_CENTER);

	treeTable.setColumnIcon(fifthColumn, new ThemeResource("../images/icon-cpu.png"));
	treeTable.setColumnWidth(fifthColumn, 112);
	treeTable.setColumnAlignment(fifthColumn, Table.ALIGN_CENTER);

	treeTable.setColumnIcon(sixthColumn, new ThemeResource("../images/icon-ram.png"));
	treeTable.setColumnWidth(sixthColumn, 112);
	treeTable.setColumnAlignment(sixthColumn, Table.ALIGN_CENTER);

	treeTable.setColumnIcon(seventhColumn, new ThemeResource("../images/icon-storage.png"));
	treeTable.setColumnWidth(seventhColumn, 112);
	treeTable.setColumnAlignment(seventhColumn, Table.ALIGN_CENTER);

	return treeTable;
}

private void addTestData(Container.Hierarchical hc) {

	hc.addContainerProperty(firstColumn, String.class, "000,000");
	hc.addContainerProperty(secondColumn, String.class, "000,000");
	hc.addContainerProperty(thirdColumn, String.class, "000,000");
	hc.addContainerProperty(fourthColumn, String.class, "000,000");
	hc.addContainerProperty(fifthColumn, String.class, "000,000");
	hc.addContainerProperty(sixthColumn, String.class, "000,000");
	hc.addContainerProperty(seventhColumn,String.class, "000,000");

	Object rootId = hc.addItem();
	hc.getItem(rootId).getItemProperty(firstColumn).setValue("All vCenter");

	for (int i = 1; i < 11; i++) {
		Object rootChildId = hc.addItem();
		hc.getItem(rootChildId).getItemProperty(firstColumn).setValue("vCenter Group "+i);
		hc.setParent(rootChildId, rootId);

		for(int j=1; j<4; j++){

			Object rootChildSubId = hc.addItem();
			hc.getItem(rootChildSubId).getItemProperty(firstColumn).setValue("vCenter "+j);
			hc.setParent(rootChildSubId, rootChildId);

			for (String str : Arrays.asList("Enterprise +", "Enterprise", "Standard", "Essentials +", "Essentials")) {
				Object finalChildId = hc.addItem();
				hc.getItem(finalChildId).getItemProperty(firstColumn).setValue(str);
				hc.setParent(finalChildId, rootChildSubId);
				hc.setChildrenAllowed(finalChildId, false);
			}
		}
	}
}

I’m not really sure what the problem is, what you have now and how you want to change it. That’s a lot of code to read through without knowing how you exactly want to change it.

My guess is that the treetable is right now only a fixed amount of rows in size and you want to have it as big as the tabsheet it is in? Give setSizeFull() or setHeight(“100%”); to the treetable.

I want scroll bar at the right hand side of the browser page, not in the right hand side of treeTable frame. I m sending u whole code as well as image. please see and give me reply how to do that. when u will expand treeTable u will see scroll bar automatically added at the right side of treeTable frame, instead of treeTable frame, I want at the right side of page(browser page).

Thanks in advance…

package com.example.treetableapp;

import java.util.Arrays;
import com.vaadin.addon.treetable.HierarchicalContainerOrderedWrapper;
import com.vaadin.addon.treetable.TreeTable;
import com.vaadin.data.Container;
import com.vaadin.data.util.ContainerHierarchicalWrapper;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.Application;
import com.vaadin.ui.*;

@SuppressWarnings(“serial”)
public class TreetableappApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window(“Treetableapp Application”);
Label label = new Label(“Hello Vaadin user”);
mainWindow.addComponent(label);
setMainWindow(mainWindow);

	getMainWindow().setContent(loadInfrastructurePage());
}

public AbsoluteLayout loadInfrastructurePage() {

	AbsoluteLayout absoluteLayout = new AbsoluteLayout();
	absoluteLayout.setWidth("990px");

	ContainerHierarchicalWrapper containerHierarchicalWrapper = new ContainerHierarchicalWrapper(new IndexedContainer());
	HierarchicalContainerOrderedWrapper hc = new HierarchicalContainerOrderedWrapper(containerHierarchicalWrapper);

	addTestData(hc);

	TreeTable treeTable = new TreeTable();
	treeTable.setWidth("100%");
	treeTable.setHeight("100%");
	treeTable.setSelectable(true);

	treeTable.setContainerDataSource(hc);

	absoluteLayout.addComponent(treeTable);

	return absoluteLayout;
}

private void addTestData(Container.Hierarchical hc) {
	String firstColumn = "firstColumn";
	String secondColumn = "secondColumn";
	String thirdColumn = "thirdColumn";
	String fourthColumn = "fourthColumn";
	String fifthColumn = "fifthColumn";
	String sixthColumn = "sixthColumn";
	String seventhColumn = "seventhColumn";
	
	hc.addContainerProperty(firstColumn, String.class, "000,000");
	hc.addContainerProperty(secondColumn, String.class, "000,000");
	hc.addContainerProperty(thirdColumn, String.class, "000,000");
	hc.addContainerProperty(fourthColumn, String.class, "000,000");
	hc.addContainerProperty(fifthColumn, String.class, "000,000");
	hc.addContainerProperty(sixthColumn, String.class, "000,000");
	hc.addContainerProperty(seventhColumn,String.class, "000,000");

	Object rootId = hc.addItem();
	hc.getItem(rootId).getItemProperty(firstColumn).setValue("All vCenter");

	for (int i = 1; i < 11; i++) {
		Object rootChildId = hc.addItem();
		hc.getItem(rootChildId).getItemProperty(firstColumn).setValue("vCenter Group "+i);
		hc.setParent(rootChildId, rootId);

		for(int j=1; j<4; j++){

			Object rootChildSubId = hc.addItem();
			hc.getItem(rootChildSubId).getItemProperty(firstColumn).setValue("vCenter "+j);
			hc.setParent(rootChildSubId, rootChildId);

			for (String str : Arrays.asList("Enterprise +", "Enterprise", "Standard", "Essentials +", "Essentials")) {
				Object finalChildId = hc.addItem();
				hc.getItem(finalChildId).getItemProperty(firstColumn).setValue(str);
				hc.setParent(finalChildId, rootChildSubId);
				hc.setChildrenAllowed(finalChildId, false);
			}
		}
	}
}

}
11850.jpg

So you want the window to scroll instead of the table? You should be able to do that by setting table height to undefined with treeTable.setHeight(null) which should make it render all rows, forcing the window to do the scrolling. Might be that you have to replace the AbsoluteLayout to something else, like VerticalLayout, and make that layout’s height to undefined as well. Changing the layout should not be a problem as you don’t seem to use any of AbsoluteLayout’s features.

Thank you very much for your reply,

I have tried your solution but still I m facing same problem. please tell me any other solution. and ya you are right I want scroll bar in window instead of treeTable.