Set Size with CSS

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

I’m a bit confused with layouts in Vaadin. I’m using a CSS layout as I want to define the sizes of components in a style sheet. I have the following code…


        layout = new CssLayout();
        layout.addStyleName("main-layout");
        this.setContent(layout);
        
        VerticalLayout userInfo = new VerticalLayout();
        userInfo.setStyleName("userInfo");
        userInfo.setSizeUndefined();

       layout.addComponent(userInfo);

I then set the size, background etc for the ‘userInfo’ layout in the CSS file for the theme. I find that the element.style overrides the style sheet and the height and width are set to 0px. I realize that’s because there aren’t any components in the ‘userInfo’ layout. (not yet anyway.) But how to I stop the size being set at the element level, I thought setSizeUndefined was ment to do that.

Panels seem to work a little better, but I don’t want the caption-wrap and the deco etc.

Should I be using VerticalLayouts? or just use Panels and hide the caption-wrap and deco sub-components?

Thanks,

Stuart.

2

Hi,

Some of Vaadin’s core layouts, Vertical, Horizontal, Grid, do pixel level calculations quite rudimentarily, to ensure consistent behavior across browsers. That means even undefined sizes are calculated from the contained child components to the layout element, which is necessary for Grid and Horizontal layouts. Vertical layout might not necessarily need those to be fixed for undefined sizes, but since all three, are based on the same parent implementation, they trickle down to VerticalLayout as well.

I believe we’re not going to change that behavior any time soon, so you’re left with two options:

  • Override the element.style definitions by using !important statement in your CSS
  • Use another layout. I’d suggest you look at CssLayout, it should fulfill the same basic needs as VerticalLayout

Hope this helps!