How to determine the browser's size?

Hello!

I have searched this forum and the best I have found is
this topic
, but it didn’t give me an answer. Looks like a lot of changes have occured in the framework since that post and hopefully someone can answer this question now.The question is -


How do I find out the size of browser’s client area?


I can detect the screen resolution, but it does not reflect if the browser is maximized or no, as well as none of the browser’s scroll bars and other elements are taken into account. It is not necessary to detect the size all the time, e.g. reflecting window resizing, just a single value of a single moment would be very nice.

The only thing I have managed so far is ((WebApplicationContext)getContext()).getBrowser().getScreenWidth() but as I mentioned above - it gives me just a screen resolution, not a browser’s client area.

Hi,

Have you tried getting the size of the main window of your application? I’m not sure, but it could provide this information.

The client area size is sent by the client to the server as URL parameters (cw and ch) in certain requests where also the screen size is sent, but AbstractApplicationServlet.updateBrowserProperties() does not store it anywhere even though screen size does get stored in the WebBrowser object. As it is not used, I am not certain if it is tested and reliable on all browsers.

You could
create an enhancement request
for making this available through the WebBrowser object.

Actually I’ve tried that before and it didn’t work. Now, when you pointed me that way again, I did that and it works. There should be more information about things like these, because for beginners it is hard to get there.

In more detail:

something.setCaption(String.valueOf(getMainWindow().getWidth())); sets the caption for something to string “-1.0”, which is correct, because I have never set the size of main window to any value. This made me think that the getWidth() never returns the actual size of the window, which is wrong. Thanks for your hint, because I would have never tried this again without you!

Button btn = new Button("The Button", new Button.ClickListener() { public void buttonClick(ClickEvent event) { event.getButton().setCaption(String.valueOf(getMainWindow().getWidth())); } }); This code, although retrieves the same information, actually sets the caption of the button to some number, which depends on the size of the browser’s window.

As I said, there should be more information about this topic, because I can only guess the reasons, why this is happening and what are the returned numbers. I suppose, that the returned numbers are not actually the client size, but rather something very close to that, because in maximized FireFox on 1920x1200 display it returned 1920 although, there was a vertical scrollbar and was not a horizontal one. I mean - the actual width was narrowed by the visible scrollbar and was not compensated by means of horizontal scrolling and thus it could not be equal to screen resolution.

About why does it act like this? I suppose, that it is related to the fact, that the application must have finished loading and only in a running state it can retrieve information about the browser. But this is also a guess and I would like to know in more detail about this. Is there an easier way to get this information from a browser without making a button click handler?

And also - is there a way to get the actually visible size of the client area? Without scrollbars, without borders - only pure width and pure height of the client area.

i’ve found this end works

int Height=600;
int Width=800;

ApplicationContext context = this.getContext();
if (context instanceof WebApplicationContext) {
Heigth= ((WebApplicationContext)this.getContext()).getBrowser().getScreenHeight();
Width = ((WebApplicationContext)this.getContext()). getBrowser().getScreenWidth();
}

I didn’t found the answer anywhere. If you really need the Size of the browser window, your vaadin app is running in, use this code:


com.vaadin.ui.AbstractComponent instance = ....;
.....
int w = instance.getApplication().getMainWindow().getBrowserWindowWidth();
int h = instance.getApplication().getMainWindow().getBrowserWindowHeight();

Or even easier

UI.getCurrent().getPage().getBrowserWindowWidth();
UI.getCurrent().getPage().getBrowserWindowHeight();