How to get rid of Vaadin style in CustomLayout ?

Hello everyone,

I work in a team mainly composed of Java developers (being one myself too, but with some HTML/CSS knowledge).
I love CssLayout and even more CustomLayout, but I… hate (to be polite) VerticalLayout/Horizontal (which my coworkers love, but can’t deal properly with neither) because of the style directly written in the HTML source (an aberration to me), especially “width” and “height”.
The problem is all our pages on our website must inherit from the same page (class) which is a VerticalLayout since most of the team preferred (at first) this option.
But now, when we use CssLayout or CustomLayout to design some more “tricky” parts of our pages, we get stuck with some “width” and “height” calculated in the HTML source, even on CustomLayout elements, and sometimes badly calculated (“width:0px; height:0px;” ???) so components get invisible.

I understand Vaadin is a framework made for Java developers which allow them to make web design without a great HTML/CSS experience, so I understand the goal of V/H layouts. But could there be a way to have these layouts not “pollute” other layouts’ code ? IE is there a way to make sure CustomLayout “divs” don’t get a “style” attribute from Vaadin ?




I feel the same about the layout calculations. But as you said, the target group has been a regular Java developer without extensive knowledge of HTML and CSS.

For the CustomLayout, I don’t think there’s any real way of not getting those inline sizes, they are calculated for undefined sizes as well. The quickest solution is to override the inline styles in your own theme by using ‘!important’. Not great, but works.

Other solution is to extend the core CustomLayout (both server and client side parts) and override the inline styles there.

Hi Jouni,

And thanks for your answer, even if I was afraid it would be this one.
Concerning your last sentence, do you mean there’s a way to override the CustomLayout (and CssLayout I guess) from Vaadin so it doesn’t write inline style at all ?

I would recommend writing your own subclasses of both CustomLayout and VCustomLayout rather than trying to replace them. Your MyCustomLayout class just needs to have the @ClientWidget(VMyCustomLayout.class) annotation, and the constructor of VMyCustomLayout can reset its style name and/or attributes after calling the super() constructor. Overriding what is done in VCustomLayout.updateRelativeSizedComponents() can be a little trickier and might require copying come client side code.

The same can be done for VCssLayout.

Replacing the Vaadin implementations is also possible, but often complicates later maintenance.