how to get browser size before BrowserWindowResizeEvent comes in?

Flow
1

hi,

i have a requirement that need generate different Component for different browser width. i add BrowserWindowResizeListener, but i found it was not triggered when page initialize.

so, how can i get the browser size when page initialize?

2

Hi,

You can do this:


@Route("browser")
public class BrowserDetailsView extends VerticalLayout {

    private Div message = new Div();

    public BrowserDetailsView() {
        add(message);
        message.addAttachListener(attachEvent -> {
            // when the browser changes
            attachEvent.getUI().getPage().addBrowserWindowResizeListener(resizeEvent -> {
                message.setText("Width"+resizeEvent.getWidth());
            });
            // first init
            attachEvent.getUI().getPage().retrieveExtendedClientDetails(re -> {
                message.setText("Width init"+ re.getWindowInnerWidth());
            });
        });
    }

}

Don’t forget that you will send a lot of requests to the server (if the user is resizing the browser).

You can also use this add-on: https://vaadin.com/directory/component/mediaquery (disclaimer I’m the author of the add-on)
It sends only a request when the condition is updated.
For example here: customMediaQuery800.setQuery("(min-width: 800px)"); when the browser size is changing from 801 to 799.

It depends of your usecase :slight_smile: . If you have any questions, feel free to ask.