Vaadin 14. Getting component width.

Flow
1

Greetings!

There was a need to get the width of the VerticalLayout component.
I try to do it through the js-function, it doesn’t work. The output is always null;

Tell me, where is the mistake? Maybe there are other ways to do this?

String[] width = new String[1]
;
grid.getElement().getParent().executeJs("return document.getElementById('content-layout').clientWidth;")
	.then(String.class, result -> width[0]
 = result);
2

Hi,

document.getElementById does not work if the id is inside a shadow root (for example if content-layout is inside the grid).

I didn’t test this code but this should work (if content-layout is your parent)

getElement().executeJs("return $0.clientWidth;", getElement() /* your element 'content-layout'*/)
                .then(String.class, result -> System.out.println(result));
3

Jean-Christophe Gueriaud:
Hi,

document.getElementById does not work if the id is inside a shadow root (for example if content-layout is inside the grid).

I didn’t test this code but this should work (if content-layout is your parent)

getElement().executeJs("return $0.clientWidth;", getElement() /* your element 'content-layout'*/)
                .then(String.class, result -> System.out.println(result));

Thank you very much!