Theme migration from Vaadin 6 to Vaadin 7

I extend base theme and migrated from Vaadin 6 to Vaadin 7. After it I noticed that almost 50% of style is broken.
For example, I have a tab sheet with Vertical layout (with label), grid layout and vertical layout (with button) in it. Each grid cell contains form layout with ui components.
So what went wrong:

  • Grid cells are painted one by one vertically (if grid is (2, 1) instead of (1,2))
  • Grid overlays the next layout with button, so I have vertical scrollbar that let me see the full content of a grid
  • Button is widen to the width of layout

Well, what I want to say is that many styles were broken. Is there any migration tips on how to move vaadin 6 styles to vaadin 7?

Vaadin 6 themes should work in Vaadin 7 much as they are, at least if you have used selectors with only CSS class names. The HTML structure in Vaadin 7 has changed a bit, so if your theme has a lot of selectors for HTML elements, that can cause incompatibilities.

Base theme extending is awful in Vaadin 7. I didn’t manage to fix my app. So I extended my theme from reindeer, it looks much better but still there’re a lot to do with configuration especially with tabsheet tabs :frowning:


Could I ask you to explain a bit what was so awful in extending the Base theme? What was different from Vaadin 6? I would really want to know, so we might be able to fix some of those before the final release.