On screen resize - resize component to a specific height

Support
#1

We have a screen and its content is in a Vertical Scroll Box. When size of the screen is large and the size of the SBox is 800px+ we can see all of its content (and the scroll bar). When the screen is small and the SBox size is 800px+ - the scroll bar doesn’t work properly and only reaches some of the content. When the screen is large and the SBox is 400px< the scroll bar works perfectly, but we see a small portion of the content.
What we want is to check when the screen size gets smaller than “some value”, so that we can resize the SBox manually as well.
This is some of what we tried putting in the extended SCSS, but it’s not doing anything:

    @media screen and (max-height: 700px) {
        .taskScrollBox {
            height: 400px;
        }
    }
Scrollbar Disappears on page reopen
#3

Hello @gk.vasil.stoychev

I think that in your case it is easier to manage ScrollBox height with Vaadin API:

Page.getCurrent().addBrowserWindowResizeListener(event -> {
    int windowHeight = event.getHeight();

    // resize ScrollBox depends on window height
});

I’ll prepare CSS based solution if the previous will not help you.

Best regards,
Daniil.

1 Like
#5

Thanks Daniil, didn’t know about that way - it works and does just what we need!

1 Like