Vertical layout into absolute layout width and height

Vaadin 6 / 7 / 8
1

Hello,

In the example below have an VerticalLayout vertRed within a AbsoluteLayout absBlue.
Width and height of the absBlue is 100%.
When I run the application the vertical layout does not occupy the entire area of the absolute layout.

Is this a bug? There is some way to get vertical layout be of the same size as the absolute layout, without me having to set the size in pixels?

Thanks.

@Theme(“mytheme”)
public class Main extends UI {

@Override
protected void init(VaadinRequest request) {
    VerticalLayout vertRed = new VerticalLayout();
    AbsoluteLayout absBlue = new AbsoluteLayout();

    vertRed.setSizeFull();
    vertRed.setSpacing(false);
    vertRed.setStyleName("verticalRed");
    
    absBlue.setSizeFull();
    absBlue.setStyleName("absoluteBlue");
    
    for (int i = 0; i < 10; i++) {
        vertRed.addComponent(new Label("my Label "+i));
    }
    
    absBlue.addComponent(vertRed, "top:5px;left:0.0px;");
    
    setContent(absBlue);
}

}

.v-verticallayout-verticalRed{
background-color: #FF0000;
}

.v-absolutelayout-absoluteBlue{
background-color: #0000FF;
}

2

You can check the sizing of layouts with e.g. FireBug. In this particular case, the code looks correct, but the behaviour is indeed quite strange. I don’t know if this is a bug, or a dedicated design desicion, but the culprit is the v-absolutelayout-wrapper element. If you give it the style “width: inherit; height: inherit;” it works as you would expect.

3

thanks, works fine.