Major styling issues after migration from 6.4.2 to 6.5

Support
#1

Hi,

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?

#2

Hi,

As it is mentioned in our release notes CUBA Platform and Studio Release Notes, now we use default behaviour of Vaadin’s Valo theme (https://youtrack.cuba-platform.com/issue/PL-8267) :

  • 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;
  }
}
#3

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