Can't edit Spacing between components in VerticalLayout

I’m still learning, and am very much inexperienced to both java and vaadin, so sorry for the stupid question. Also I made the label background white on purpose to try to see what was causing the gap. I don’t think it’s the label because it isn’t stretched to fill up the gap.

But I’m having trouble with this. I have a label component and a grid. I have this really crazy gap between them



However after looking at the book of vaadin, I learned I can use firebug to help me figure out what is going on. I found this code:

<div style="height: 33.3333%; margin-top: 0px;" class="v-slot v-slot-TitleLabel">

If I change this to 10% in Firebug. I don’t have a horrifying gap anymore:



But if I go to my .scss file and add this:

    .v-slot .v-slot-TitleLabel{
        height: 10%;
    }

and run my program, it doesn’t work. I do have @Theme(“myTheme”) in my UI class.

Is this even possible in VerticalLayout or do I need to use GridLayout? or something else to get this to work?

Ok I think I found part of the problem, but it doesn’t solve my issue specifically.

My code:
VerticalLayout layout = new VerticalLayout(); layout.setSizeFull(); layout.addStyleName("backgroundColor"); layout.setMargin(true); layout.addComponent(titleLabel); layout.addComponent(grid); layout.addComponent(btnsendToAS400); What causes the issue is the layout.setSizeFull(); part. If I use layout.setSizeFull() then I get the terrible gaps, and I also cannot resize my grid height.

But if I take off the setSizeFull(); the CSS for my background layout and everything doesn’t display properly. However, my components no longer have gaps between them. So that’s something good at least.

Hi,
this effect typically occurs when the height settings are inconsistent. In this case vaadin resorts to giving all components equal heights, i.e. 33 % in your case. The browser console might display a message.

Your “titleLabel” probably does not define a height, so using addComponent is fine here.
What is the height of your “grid”? I assume “100%” since this quite natural in most cases. In this case you should invoke layout.setExpandRatio(grid,1.0f) after the #addComponent(grid) line to explicitly designate the grid to be the control that can get the space available in the layout.
Your “btnsendToAS400” probably also does not define a height, so it should be all right, at the bottom of the layout.

Also if your grid is not height=100%, all three controls turn out to have a fixed height, but your layout has setSizeFull, so vaadin needs to decide what to do with extra space available. If it is your intent to have such space at the end of your content, you should add a further component, e.g. Label dummy = new Label(“”), set its height to 100%, and(!) set the expandRatio to 1, then the gap on top also vanishes, and you have your empty part at the bottom.

Hope this helps, otherwise please provide a more complete example with all layout related settings.

Ok setExpandRatio worked!!! Thank you!

Like this:

titleLabel.setHeight("100%");
grid.setHeight("100%");
grid.setWidth("100%");

layout.addComponent(titleLabel);
layout.addComponent(grid);

layout.setExpandRatio(titleLabel, .05f);
layout.setExpandRatio(grid, 1.0f);
layout.setSizeFull();

Got rid of the gap.

Unless you explicitly want the label to be of variable height, you do not need to invoke any specific settings for your label, just addComponent is enough here. Otherwise you might still see some gap when viewed on a very large monitor (as you reserve 5% of the space for the label, which might or might not correspond to the height of the “white label” in your screenshot.

Only for the grid you need the setHeight() and setExpandRatio(grid,1.0f).

In my experience, if I want to set specific styles in Vaadin, I need to add the keyword !important in the styles to make sure that they overwrite the default styles - so maybe this would work either:

.v-slot .v-slot-TitleLabel{ height: 10% !important; } Best regards, Martin.