Major styling issues after migration from 6.4.2 to 6.5


I have seen some major styling issues when I attempted to migrate to 6.5. I reverted the migration as the number of issues were too many to handle at this moment (for me). I thought I should share the information nonetheless.

  • scroll bars disappeared at all locations
  • some boxes/table headers were flat (height = 0)
  • text did not appear (it was in the HTML but the elements seemed to have an height of 0 as well)

I do have a lot of styling customisation going on in my project but wasn’t expecting this. What changed that caused this behaviour?


As it is mentioned in our release notes, now we use default behaviour of Vaadin’s Valo theme ( :

  • HBox and VBox use overflow: auto CSS mode. If a HBox or VBox has a child with 0 height then the layout will have non-zero height.
  • Font size is inherited using normal CSS rules instead of explicit setting for components.

I think you used CssLayout and applied font-size:0 in CSS. Now it is inherited to DOM descendants by default. You can use this simple CSS fix with your font-size: 0 styles:

.my-css-layout-panel {
  font-size: 0;

  & > * {
    font-size: $v-font-size;

Thanks - will check to see if this improves the styling/layout after update (cannot do it now but hopefully next sprint).