Layout issues

Here is my code.

public class HelloworldApplication extends Application {
@Override
public void init() {
Window mainWindow = null;
mainWindow = new Window(“My Window”);
mainWindow.setContent(new VerticalLayout());
setMainWindow(mainWindow);
setTheme(“myTheme”);

	VerticalLayout allCompPane = new VerticalLayout();
	allCompPane.setWidth("980px");
	allCompPane.setHeight(null);
	allCompPane.setStyleName("myStyle");

	VerticalLayout topPane = new VerticalLayout();
	VerticalLayout middlePane = new VerticalLayout();
	VerticalLayout bottomPane = new VerticalLayout();
	
	Label copyRight = new Label("My Footer");
	bottomPane.addComponent(copyRight);

	Label label = new Label("My Header");
	topPane.addComponent(label);

	Label label1 = new Label("My Content");
	middlePane.addComponent(label1);

	allCompPane.addComponent(topPane);
	allCompPane.addComponent(middlePane);
	allCompPane.addComponent(bottomPane);
	
	
	allCompPane.setExpandRatio(topPane, 2);
	allCompPane.setExpandRatio(middlePane, 7);
	allCompPane.setExpandRatio(bottomPane, 1);

	
	VerticalLayout mainLayout = new VerticalLayout();
	Panel mainPanel = new Panel();
	mainPanel.setStyleName(Panel.STYLE_LIGHT);

	mainLayout.addComponent(allCompPane);
	mainLayout.setComponentAlignment(allCompPane, Alignment.TOP_CENTER);

	mainPanel.addComponent(mainLayout);
	mainWindow.addComponent(mainPanel);

	/*
	mainWindow.getContent().setSizeFull();
	mainLayout.setSizeFull();
	mainPanel.getContent().setSizeFull();
	mainPanel.setSizeFull();
	mainPanel.setScrollable(true);
	topPane.setSizeFull();
	middlePane.setSizeFull();
	bottomPane.setSizeFull();
	*/
}

}

Here are my questions:

  1. How do I make my panel to occupy to the height of browser window height? (notice I would like to have 980px width only and centered.)
  2. Why my topPane, middlePane and bottomPane are not expanded even though I have set the expand ratios I want?

Here is styles file.

@import url(…/runo/styles.css);
.myStyle {
font-size: 14px;
font-weight: bold;
margin: 10px;
padding: 10px;
background: #1E2123 repeat;
color: #fff;
float: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

I have tried to experiment with setSizeFull() on all components as you can see in the commented out code.
Please look at the output in attached file (screen_shot.JPG)

Thanks
Raj.
11292.jpg

I think you have all the elements there, but there’s just something wrong. VerticalLayout, which you use quite a lot there, is 100% wide by default, but has undefined height, so you need the setSizeFull()s you have commented out. Not sure if you need some more.

[list=1]

[]
For the panel, you need setHeight(“100%”), just make sure its containing layouts also have 100% height (probably with setSizeFull()).
[
]
Some of their containing layout probably has undefined height, so they shrink to minimum height.

[/list]Your layout is possibly a bit more complex than necessary as you only have one layout component inside the root layout of the window and the same in the panel. I think you could just use mainPanel.setContent(mainLayout) and mainWindow.setContent(mainPanel) instead of using addComponent() there. Well, not sure if that’s what you want.

I hope you are using Firebug, it makes your life a lot easier. Also the [tt]
?debug
[/tt] mode is an important tool for checking that you haven’t forgotten to define (or undefine) the size of some layout. If you have a component with 100% height inside a layout with undefined height, there’s a problem and the Analyze Layouts button will tell you that.

Marko,

Thanks for the response, I will try out your suggestion, I have quick question:

If I set height to 100% for the panel, would still get scrollbar on the side, this one the comments I am seeing in the forum that if I set height to 100%, I will loose scrollbar?

Thanks
Raj.

Yeah, using 100% means that your app only takes the visible area of the screen and you can’t scroll the page.

But if you want to have the scrollbars, you have to define some height for the panel if you want to use expand ratios or other proportional heights inside it. The expand ratios are meaningless if they are not
of
some specified height. You can’t have a relatively sized components inside a component of undefined height, which tries to shrink to minimum possible size, as that is sort of a paradox (how much is 50% of “as small as possible”).

The ?debug window reports such conflicts.

Marko,
Will I get scrollbars if I do not use Panel and just use verticallayout?

Thanks
Raj.

Scrollbars in the main window or inside the layout? Windows and Panels can have scrollbars
inside
them, VerticalLayout can’t.

But if I understood correctly, you want to have scrollbars in the main window, and the Panel/VerticalLayout inside that (without scrollbars inside it). In that case, you can use VerticalLayout just as well.

Hi Marko,

Here is my modified code, I am still struggling to get vertical and horizontal scrollbars. As you can see my goal is to center allCompPane to the browser window and get scrollbars.

Also you can see that some of the bottomPane components got cut.

Thanks for your help.

Raj,

public class HelloworldApplication extends Application {
@Override
public void init() {
Window mainWindow = null;
mainWindow = new Window(“My Window”);
VerticalLayout content = new VerticalLayout();
content.setSizeFull();
mainWindow.setContent(content);
setMainWindow(mainWindow);
setTheme(“myTheme”);

	VerticalLayout allCompPane = new VerticalLayout();
	allCompPane.setWidth("980px");
	allCompPane.setHeight("100%");
	allCompPane.setStyleName("myStyle");

	VerticalLayout topPane = new VerticalLayout();
	VerticalLayout middlePane = new VerticalLayout();
	VerticalLayout bottomPane = new VerticalLayout();
	
	VerticalLayout middleLPane = new VerticalLayout();
	VerticalLayout middleMPane = new VerticalLayout();
	VerticalLayout middleRPane = new VerticalLayout();

	HorizontalLayout middleHPane = new  HorizontalLayout();
	middleHPane.setSizeFull();
	middleHPane.addComponent(middleLPane);
	middleHPane.addComponent(middleMPane);
	middleHPane.addComponent(middleRPane);
	middleHPane.setExpandRatio(middleLPane, 2);
	middleHPane.setExpandRatio(middleMPane, 6);
	middleHPane.setExpandRatio(middleRPane, 2);

	middleMPane.setSizeFull();
	middleRPane.setSizeFull();
	middleHPane.setComponentAlignment(middleLPane, Alignment.TOP_LEFT);
	middleHPane.setComponentAlignment(middleMPane, Alignment.MIDDLE_CENTER);
	middleHPane.setComponentAlignment(middleRPane, Alignment.BOTTOM_RIGHT);

	middlePane.addComponent(middleHPane);
	
	Button button1 = new Button("Button1");
	Button button2 = new Button("Button2");
	Button button3 = new Button("Button3");
	Button button4 = new Button("Button4");
	Button button5 = new Button("Button5");
	Button button6 = new Button("Button6");
	Button button7 = new Button("Button7");
	Button button8 = new Button("Button8");
	
	middleLPane.setSpacing(true);
	middleLPane.addComponent(button1);
	middleLPane.addComponent(button2);
	middleLPane.addComponent(button3);
	middleLPane.addComponent(button4);
	middleLPane.addComponent(button5);
	middleLPane.addComponent(button6);
	middleLPane.addComponent(button7);
	middleLPane.addComponent(button8);
	
	Button image = new Button();
	image.setIcon(new ThemeResource("save_earth.jpg"));
	
	middleRPane.addComponent(image);
	
	Label copyRight1 = new Label("My Footer1");
	bottomPane.addComponent(copyRight1);
	Label copyRight2 = new Label("My Footer2");
	bottomPane.addComponent(copyRight2);
	Label copyRight3 = new Label("My Footer3");
	bottomPane.addComponent(copyRight3);
	Label copyRight4 = new Label("My Footer4");
	bottomPane.addComponent(copyRight4);
	Label copyRight5 = new Label("My Footer5");
	bottomPane.addComponent(copyRight5);

	Label label = new Label("My Header");
	topPane.addComponent(label);

	Label label1 = new Label("My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  ");
	Label label2 = new Label("My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  ");
	Label label3 = new Label("My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  ");
	Label label4 = new Label("My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  ");
	Label label5 = new Label("My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  My Content  ");
	middleMPane.addComponent(label1);
	middleMPane.addComponent(label2);
	middleMPane.addComponent(label3);
	middleMPane.addComponent(label4);
	middleMPane.addComponent(label5);

	allCompPane.addComponent(topPane);
	allCompPane.addComponent(middlePane);
	allCompPane.addComponent(bottomPane);
	
	
	allCompPane.setExpandRatio(topPane, 2);
	allCompPane.setExpandRatio(middlePane, 7);
	allCompPane.setExpandRatio(bottomPane, 1);

	mainWindow.addComponent(allCompPane);
	content.setComponentAlignment(allCompPane, Alignment.TOP_CENTER);

	topPane.setSizeFull();
	middlePane.setSizeFull();
	bottomPane.setSizeFull();
}

11293.jpg