How to set a component at height 100%

[Thomas1 (Thomas Pitrou)]

Hi !

I’m trying to set a component like a TabSheet at height 100% by using method setHeight but it doesn’t work.
I also try to create my own CSS with the following code to initialize html and body but I’ve got the same result.

@import "../default/styles.css";

html,body {
	margin: 0;
	padding: 0;
	height: 100%
}

If I set height with “px” size there is no problem but obviously I need to get the client window size to adapt the component to the screen.
My question :

• is there a way to set component’s height with % in IT Mill ?
• How can I get the client window size like GWT ?

Thanks

[Mauno (Mauno Haukila)]

I made quick test with 5.2.4 and this works:

TabSheet t =new TabSheet();
 t.addTab(new Label("Label 1"));
 t.addTab(new Label("Label 2"));
 t.setHeight(100,Sizeable.UNITS_PERCENTAGE);

Remember that height 100% depends on container size. You must add height 100% to tabsheet’s container and its container etc…

[Marko1 (Marko Grönroos)]

@Thomas

Hi !

I’m trying to set a component like a TabSheet at height 100% by using method setHeight but it doesn’t work.

Hi, the
setHeight()
method allows percentual units.

// Set the tabsheet to scale to full size inside its container
tabsheet.setWidth(100, Sizeable.UNITS_PERCENTAGE);
tabsheet.setHeight(100, Sizeable.UNITS_PERCENTAGE);

Alternatively, you can use
setSizeFull()
to easily set both width and height to 100%.

Also remember that setting the size of a component to 100% applies only
inside its containing component
. Many layouts tend to shrink to minimum size (horizontally or vertically or both) by default. So, unless the component is the root layout of the window itself, you have to set the size of all the containing layouts and components to 100% as well.

[Thomas1 (Thomas Pitrou)]

Thanks for that, I always appreciate yours quick answers

[Thomas1 (Thomas Pitrou)]

Well I come back … to add more informations about this subject.

If I try to set a TexfField with his height and width at 100% like this

public void init() {
Window main = new Window(“It Mill Testing”);
setMainWindow(main);
TextField tf = new TextField();
tf.setWidth(100,Sizeable.UNITS_PERCENTAGE);
tf.setHeight(100,Sizeable.UNITS_PERCENTAGE);
main.addComponent(tf);
}

or with this code

public void init() {
	Window main = new Window("It Mill Testing");
	setMainWindow(main);
	TextField tf = new TextField();
	tf.setWidth("100%");
	tf.setHeight("100%");
	main.addComponent(tf);

}

Results :

• I’ve just got the correct size for the TextField’s width but not for his height under FireFox 3.
• It works fine under Opera 9.5 (height and width at 100%)

If I try this

public void init() {
Window main = new Window(“It Mill Testing”);
setMainWindow(main);
TabSheet t =new TabSheet();
t.addTab(new Label(“Label 1”));
t.addTab(new Label(“Label 2”));
t.setHeight(100,Sizeable.UNITS_PERCENTAGE);
main.addComponent(t);
}

Result :
It does not seem to work for me with FF3 or Opera, I’m using IT Mill 5.2.5.
I will investigate why it doesn’t work.

[Mauno (Mauno Haukila)]

Your Window is generated with default layout (I guess Vertical OrderedLayout), and it’s height is “as small as possible”.
Adding main.getLayout().setHeight(“100%”) helps.

[Thomas1 (Thomas Pitrou)]

Adding main.getLayout().setHeight(“100%”) helps.

Thank you for your help, I just try it and it’s work fine
Thanks !

[Arm (Arm Brahaj)]

I am working on a first app with Vaadin and setting the height to 100% looks to be quite a challenge.
I run into many forum posts, and I noticed the: [quote]
main.getLayout().setHeight(“100%”)
[/quote]
Apparently it looks like the getLayout method is depreciated on Window Object (running Vaadin 6.5.0). Any reason?

[Jouni1 (Jouni Koivuviita)]

getLayout() was deprecated in favor of getContent(). It does the same thing, but doesn’t expect the returned component to be a layout, just a ComponentContainer.

So main.getContent().setHeight(“100%”); is the current thing to do.

[Arm (Arm Brahaj)]

Thank you!