setWidth() and setSizeFull() on components has no effect.

Vaadin 6 / 7 / 8
1


This has been resolved.
Solution for me is in the 5th, 6th comment.

Ever since I’ve used this framework, I always ran into the same problem with the design. Components, don’t take up the available space, but instead seem to use the minimum. Using .setSizeFull(), or .setWidth on then has no effect, they stay the same.
It’s weird that I can’t find anyone else having this problem… so it must be me doing something wrong?

Here’s an example: Panel somePanel = new Panel("Some Panel"); somePanel.setContent(myCustomComponent); somePanel.setWidth(100f, Unit.PERCENTAGE); myGridLayout.addComponent(somePanel); This has no effect. But if I change the “style” attribute of the panel element to include “width:100%” it streaches neatly. Does anyone have any ideas what I migth be doing wrong?

2

Is somePanel inside a 100% width component or is it a root component (content of UI)? If it’s it root component. You do set it with setContent instead of addComponent?

3

somePanel is inside a GridLayout, which is inside another componenent. Within the same grid there are panels wider (because of their content) than the one’s I’m setting 100% width to. The somePanel contains a Vertical layout and a horizontal layout, which I also set width of 100% to.

4

If it makes you feel any better I too struggle with this … constantly !

I’ve read the relevant parts of the Book of Vaadin over and over again. It’s like it works sometimes and sometimes not.

5

Thanks, Peter, it does help a little bit :smiley:
At least I’m not the only one who’s expieriencing this frustrating issue.

6

Well I don’t know the component tree you are building but in your code you are not sizing ‘myCustomComponent’ which without anyother information I have to presume it is undefined. If Undefined, it will display inside the panel using the minimum space necessary. Setting the VerticalLayout and HorizontalLayout size inside myCustomComponent is also necessary, but myCustomComponent must have set its size too.

If you set 100% width, it should stretch to get all available Panel’s space. The inner Vertical and HorizontalLayout’s will expand to ocupy all space available from myCustomComponent, since they have their size settled from what you said.

I also struggled a while with that issue, but once understood it is certainly easy. Checking with a new app, doing some tests and analyzing the output html helps a lot.

Give it a try. Good luck.
Regards,
Carlos.

7

Thank you Carlos, you are right. Just setting the panel to occupy 100% width wasn’t enough for it to streach out (which doesn’t seem logical to me, but okay). I had to set all my inner layouts to full width too. Now I managed to make it look better.

I have a View, that’s a Vertical Layout and is configured with “setSizeFull()”
within it I have a TabSheet, which is also configured with “setSizeFull()”
within it I have a VerticalLayout, which is also configured with “setSizeFull()”
within it I have a VerticalLayout, which is also configured with “setSizeFull()”
within it I have a GridLayout (a.k.a. myGridLayout), which is also configured with “setSizeFull()”
within it I have a Panel (a.k.a. somePanel), which is configured with “setWidth(100f, Unit.PERCENTAGE)”
within it I have a VerticalLayout (a.k.a. myCustomComponent), which is also configured with “setWidth(100f, Unit.PERCENTAGE)”
and within it I have a GridLayout and a HorizontalLayout, for which I “setWidth(100f, Unit.PERCENTAGE)” and it finally made the panel streach out.