Howto: Css sized divs and style attributes

I see that f.e. rendered VerticalLayout comes with attribute:

style = "...; height: 10px;..."

That seems to make it impossible to resize a div by css usage as:

.v-verticallayout-mybox {
 height : 15px;
.v-verticallayout-mybox:hover {
 height : 50px;//okay, make it big

Is this by design? In my understanding I can fully use css for the kind of formatting. Vaadin breaks this concept by not using class attributes all the way. Am I right?

Is there any known workaround?



The widths and heights in the style attribute of VerticalLayout are calculated during rendering, and follow the layout width and height settings, disregarding any CSS settings. You can say setHeight(“15px”) to make it that high, but that doesn’t work for the :hover case.

If you really want to set the height or width in CSS, you should consider using CssLayout, which doesn’t make any size calculations and offers more flexibility with CSS. It’s also faster.

The bigger problem is that the :hover would not work also if the
layout is a VerticalLayout or HorizontalLayout, which doesn’t change its size if the CSS of the contained CssLayout changes. It has “overflow: hidden”, so the expanded component will be clipped. You can solve that by using CssLayout also for the containing layouts, or by giving enough space for the CssLayout to expand.

For a similar case, see
this thread

Thanks for your quick answer.
For absolute positioned elements (rollouts, overlays) it is possible to override style attribute settings by using !important.
I know one has to be careful with that.

CssLayout sound interessting - do I understand right that I have full control over all css attributes there (from styles.css)?