How to set a component at height 100%

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

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…

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.

Thanks for that, I always appreciate yours quick answers :slight_smile:

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

or with this code

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

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.

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.

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

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?

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.

Thank you! :slight_smile: