After bumping from 25.1.8 to 25.2.1, every Grid and TreeGrid view in my app collapsed to a single visible row. The data loads fine, but only one row shows at a time with an internal scrollbar. I saw the same thing on 25.2.0. Going back to 25.1.8 makes it work again.
My views are a normal setup: a routed view that extends VerticalLayout with setSizeFull(), holding a Grid with setSizeFull(). Nothing in my own code changed between the two versions.
I traced it in DevTools. The view chain itself is fine. The problem is inside vaadin-app-layout’s shadow DOM. The content wrapper (<div content>) no longer fills the available height. On 25.2 it sizes to its content instead of to the host height minus the navbar. So height:100% on my view resolves against a content-sized box, and everything below collapses.
Concrete numbers from my app, in a 712px tall window:
- vaadin-app-layout is 712px
- the shadow
<div content>is only 164px (it should be around 665px, i.e. 712 minus the 47px navbar) - that wrapper computes to display:block; flex:0 1 auto; height:164px, and it exposes no ::part
Workaround. I inject height:100% back onto that wrapper through the app-layout shadow scope.
frontend/styles/components/vaadin-app-layout.css:
[content] {
height: 100%;
}
Wired up in Flow with:
@CssImport(value = “./styles/components/vaadin-app-layout.css”, themeFor = “vaadin-app-layout”)
That restores the content area to 665px and the grid to full height, with no overflow.
I don’t know if this is an intended change to the AppLayout styles or a regression. It looks like the wrapper lost a height:100% rule that 25.1.x had. Is this known, and should I file it on web-components?