Setting the viewport size fixed

Hi,

I need to set the Viewport size to 1920x1080, so that no vertical/horizontal scrollbars appear.

Currently with the below code snippet it is giving scrollbars for 1920x1080 resolution but works fine for 1920x1200.

@Override
    public void configurePage(AppShellSettings settings) {
        settings.setBodySize("1900px", "1050px");
    }

Could someone please help?

Regards,
Amal Suresh

The viewport size that you define is the part inside the content area of the browser. You also need to take into account any pixels used for e.g. the browser’s address field and tabs. The exact size there depends on the browser and operating system which means that it might be better to set the height as 100% to make it cover all the space that is visible.

Do you want to remove the scrollbars from the body?
You can also set the following style

body {
    /* use optionally min-height if you want still to scroll vertically */
    height: 100vh; 
    /* use % instead of vh, because it prevents the horizontal scrollbar when a vertical appears */
    width: 100%;
    /* prevents the overflow that leads to scrollbars, event without content */
    margin: 0;
    /* to really prevent scrollbars you can use overflow none, else use auto */
    overflow: none;
}

In web development, I mostly apply the box-sizing property to all element, so they behave better in sizing with padding:

* {
    box-sizing: border-box;
}

Good Luck!

This actually removes the scrollbar, but some part of the screen it is hiding

Does it hide elements vertically or horizontally? Or both?

If you want a “typical” scrollbar, overflow-y: auto; may help.

But when items are hidden are horizontally you may want to look into Vaadin’s FlexLayout and into general CSS Flexbox.
The FormLayout does also supports layout shifting on different screen sizes.