Vaadin Flow - Determining Actual Component Size

This seems like a simple question and was easy to do in pre-Flow versions of Vaadin. I am trying to figure out how to determine the size of a component or its element. The hasSize interface isn’t particularly useful for this. I’ve tried attaching “resize” listeners to the underlying elements and have had no luck.

For the purpose of this thread, can we just assume that I have a valid reason for wanting to do this?

I am guessing that there is a fundamental reason why this is so difficult having to do with the fact that the client-side information is hard to get on the server. Can anybody point me in the right direction?

Hi,

You can get the actual size of a component by calling a JavaScript function that will return a promise. You can check this code: https://vaadin.com/forum/thread/16954389/18412645
Can you explain your usecase? Not because I think it’s not needed, but perhaps to give you a better answer.

( especially this part in the code: anotherExampleButton.getElement()
.executeJs(“return $0.clientWidth”, anotherExampleButton.getElement()).then( width → {
Notification.show("Button width "+ width.asNumber());
});

Thanks for the link.

My usecase is that we’re developing a web-based app that simulates a non-traditional MDI-type interface. We have business reasons for doing this.

The particular implementation that wants the component size is that we allow numerous portlet-type windows on a desktop. The size check is to make sure that the windows don’t get dragged off the screen, rearrange them, preserve the layout, etc.

Thanks, I followed the link and implemented what I needed with a little tweaking.