Combox width issue #2 (right space)


i have a similar problem like the one mentioned in a thread called “Combobox width issue”. I really dont have a clue why my combox has quite a big space area at the right side of the component.

In the attachment you can see a HorizontalLayout with 6 components. 3 combox and 3 labels. I really dont understand why there is so much space at the right corner of the combo (before the next Label begins). The screenshot also includes my firebug screen and the border of the div of one combobox. (click on attachment to view it completely, the embedded screen is trimmed!)

I dont want to waste so much space in my header section but i dont see how to manage it differently. I already used a different layout (gridlayout) w/o any difference. The comboxboxes are created with 200px width.


A wild guess: The parent layout is set to pixel width or 100% (not undefined). No expand ratio is set for any component and thus the remaining space in the parent layout is divided between each component cell, causing the empty space between components.

your guesses are all correct but the width (defined in pixels) is smaller than it needs to be, just to be sure that there is no remaining space. You can see that at the first label, where a char is not completely visible because the layout is too small (in terms of width).

I always assumed that when a container is smaller than all the components, there should be no space around the components. So making the Layout even smaller only results in even more stripped Labels.

Of course i could leave out the layout size definitions if this would help.


a label has the width of 100% by default, to enable line wrapping. my suggestion is that you put the label AND the horizontalLayout to setSizeUndefined().

as i said in my last post, i set the width of the layout in pixels. Of course i have not set up width definitions for the labels, why should i ? I also defined the width of the combobox (200px). But the div gets something around 230px at the end. (cause of the right corner).

Perhaps i should create a test application for this, just to make it more visible to you…


I pointed out the label because the default width is relative, not undefined, and undefined is what you probably want. I did not mean that you should have a defined width, as in pixels.

A test application would be great. It is probably easier to explain it in words and code than with words alone.

Here’s my guess: I believe it’s the implicit expand ratios that are adding that space.

Once you give Vertical/Horizontal/GridLayout a size, it will then automatically set implicit equal expand ratios to all of its components inside the layout (which you override per component). And because of there is extra space in the layout (the size of the contained components in total is less than the layout’s size), that extra space is divided to all the component slots, and hence extra space after components.

So the remedy in my opinion is the same as Jens pointed out: set the layout and the labels to undefined width (and probably set the spacing to true for the layout). Or set the width of the layout to be the sum of the contained components’ width.

Thanks for your explanations. I will check out your proposals. This are the things which most likely affect new Vaadin programmers like me. I basically know how layout works but in detail its not that easy…