Determine Browser's Height

I would like to manage the Height of the page manually and therefore I need to retrieve the Height of the Browser.
Whever I invoke the page Debug mode (?debug&restartApplication) it returns the correct value for the getBrowser().getScreenHeight()

On normall page calls, the Height is always displaying 0 Pixels.


public class MyApplication extends Application {
    private final static Window mainWindow = new Window(Constant.MAIN_WINDOW_TITLE);

    private static final Logger LOG = LoggerFactory
        .getLogger(TreeClickListener.class);

    @Override
    public void init() {
        setApplicationTheme();
        buildMainWindow();
        setMainWindow(mainWindow);
    }

    private void setApplicationTheme() {
        setTheme(Constant.THEME_NAME);
    }

    private void buildMainWindow() {
        mainWindow.setImmediate(true);
        mainWindow.setScrollable(true);
        setMainWindowContent();
        setMainWindowHeight();
    }

    private void setMainWindowHeight() {
        mainWindow.getContent().setHeight(getApplicationHeight(),
            Sizeable.UNITS_PIXELS);
    }

    private int getApplicationHeight() {
        final WebApplicationContext ctx = (WebApplicationContext) getContext();
        final int height = ctx.getBrowser().getScreenHeight();
        
        LOG.debug("I AM IN BrowserApplication.java and Height is: " + height);

        return height;

    }


Am I doing sth wrong!?

You do not need to calculate the height yourself, let the layout do it for you.


  mainWindow.getContent().setHeight(100, Sizeable.UNITS_PERCENTAGE);

should do the trick.

Thank you for the reply John
I am using CssLayout and I need the height for the inner elements. Somehow I have to retrieve the Height of the working window and make some calculations for the inner elements.
Setting the mainWindow to 100% and then trying to get the Height mainWindow.getContent().getHeight() still does not work (returns -1.0)

The calculated pixel sizes of layouts and components are in general not communicated from the browser to the server side, so on the server getHeight() returns you the size you have set (e.g. “-1px” for undefined or “100%” for full height, or “500px” if you have explicitly set the size as such on the server side).

The size of the Window is communicated to the server, and can be requested from the Window with the standard getWidth() and getHeight() methods. You can also add a ResizeListener for a window.

The main window and the layout that acts as its contents are separate. Window.addComponent() puts components inside the its contents layout, not directly in itself, and replacing the contents layout can be achieved with Window.setContent().

If your call returns -1, you probably have not set the height of the content of the main window.

That is exactly why I wanted to get the Height of the Browser

final WebApplicationContext ctx = (WebApplicationContext) getContext();
final int height = ctx.getBrowser().getScreenHeight();

The funny thing is that by using ?debug all the values are returned correctly and I designed the layout by using the ?debug parameter and now nothing works

So back to my first question, on the first post,
any idea why the getScreenHeight() does not respond correctly?

Screen size is just that:
screen
size, not browser size. As I wrote previously, the window size can be obtained with Window.getHeight() and Window.getWidth().

Do note that such information (both screen size and window size) is not available e.g. in the application constructor but only later, in Application.init() and after the window has been displayed to the user, respectively.

At least for me,
getScreenWidth()
works just fine.

Henri, then how is it possible to set a specific Theme based on the screen size ?

if the content it is already displayed to the user then it is just too late.

If I try to get the context from the attach() method the screen info are still 0.

I know this is an old thread, but this method doesn’t seem to work anymore (the whole concept of “Window” seems to be out on Vaadin 7+), so I’d like to know if there’s a way to get component, or “window” or whatever (but not webBrowser.getScreenWidth(), which returns screen resolution and is of no use), absolute size in pixels.

My use case would be to dynamically set default width for grid columns depending on available space.

How about Page.getCurrent().getBrowserWindowHeight() and …Width()? You can also add use
addBrowserWindowResizeListener() to add an event whenever the browser window size changes.

-Olli

Thanks a lot for these hints! They where there but I simply haven’t messed around enough with Page to be familiar with them.
Getting size changes on resizing will probably be very useful for me also for developing a responsive interface, which is another of my current battles.

Thanks again, Olli!

No problem!