ResizeObserver - a new handy API to configure your components based on their actual size

Viritin 2.8.9 now contains a handy class called ResizeObserver. You can use it to detect the rendered size of any component, so you can do further configuration that are optimal for your users. For exaple you probably want totally different set of columns for your Grid, if you are using it from a smarphone vs desktop. Or you might want to reconfigure those if user makes the grid narrower in a Splitlayout.

Even if you are just interested about the window/UI size, you can proabably replace two pretty similar code snippets with one (one for “ExtendedClientDetails”, on for page resize events).

Example/test UI:

Go and give it try, I’d like to contribute a similar helper to core soon, but input from apps using this PoC would help to get details right. An issue in the core if you want to thumb up or share insights: Add a mechanism to configure components based on their actual sizes · Issue #19129 · vaadin/flow · GitHub


I tested this and is working perfectly. Thanks @Matti

Here is a sample of how this ResizeObserver works

1 Like