Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

UI designer and layouting of custom components

David Hofmann
1 decade ago Jan 17, 2011 12:31am
Jouni Koivuviita
1 decade ago Jan 17, 2011 10:33am

AbsoluteLayout (the original composition root for the custom component) is by default 100% x 100% sized. And since there's a CustomComponent wrapping that, 100% x undefined sized by default, the AbsoluteLayout is 0x0 size (100 percent from undefined is zero).

When you change the composition root to a Label (CustomComponent.addComponent does that when you call it for the first time), the Label has a 100% x undefined size by default, hence it shows.

So in order to see the original AbsoluteLayout, you either need to set the height of the CustomComponent or the AbsoluteLayout explicitly to some non-percentage height, or define the CustomComponent's height 100 as well, and set the height of the parent of the CustomComponent to some defined height as well.

Might sound complicated, but all you need to do is this: mainLayout.setHeight("200px");

And for the future, you might want to use the "Analyze layouts" button in the debug window. It'll show you these kinds of errors (add ?debug parameter to your application url).

Last updated on Jan, 17th 2011
David Hofmann
1 decade ago Jan 17, 2011 3:48pm
David Hofmann
1 decade ago Jan 17, 2011 3:51pm
ahmed samir
1 decade ago May 24, 2012 3:41pm
Adil Rizwan Mohammad
9 years ago Dec 23, 2013 6:11pm
Henri Sara
9 years ago Jan 02, 2014 12:16pm

Not much information to go on in your post, but I'd venture a guess: most likely your custom component (or something in it) has zero size, either directly or based on its parent layout and how it is added there. Use the "AL" (analyze layouts) tool in the debug window to get more information (add "?debug" to your application URL) or check e.g. with Firebug whether the component is there but with zero size, and then check your layouts.