Set vertical layout to stretch to whole screen

Flow
1

I have this code:

public class LoginView extends VerticalLayout implements BeforeEnterObserver {

    private LoginForm login = new LoginForm();

    public LoginView() {
        addClassName("login-view");
        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setAlignItems(Alignment.CENTER);
        login.setAction("login");
        add(new H1("Test application"), login);
    }
}

I want to make LoginForm take the center of screen, by this I need to make my VerticalLayout have a screen height. I can make custom height (for example, setHeight(“1000px”); , but I want my forms to be right in the center. VerticalLayout wraps elements outside, but how can I make it screen height? (I know I can use LoginOverlay instead, but I would want to know how to do the same with VerticalLayout)

2

I am not sure about your question as your code seems already to be the solution (or I do not understand the issue here). Can you elaborate the issue a bit more or show a screenshot of what is not working?

3

image
image2559×1179 54 KB

Currently login page looks like this, but I need this form to appear right in the center of screen, not above

4

Are there any other components containing the login view, like a router layout? Check, if they maybe are not set to full height. The browser dev tools are quite useful for that.

5

No, there are no other components. Full code:

@PageTitle("Login view")
@Route(value = "login", autoLayout = false)
@AnonymousAllowed
public class LoginView extends VerticalLayout implements BeforeEnterObserver {

    private LoginForm login = new LoginForm();

    public LoginView() {
        addClassName("login-view");
        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setAlignItems(Alignment.CENTER);
        login.setAction("login");
        add(new H1("Test application"), login);
    }

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        if (event.getLocation()
                .getQueryParameters()
                .getParameters()
                .containsKey("error")) {
            login.setError(true);
        }
    }
}
6

Did you check that your outer html is full sized? html, body and so on?

7

I have no other settings, it’s a plain empty project. Right now I tried using setHeight(“100vh”); and it worked for me. So it can be considered as a solution. But is it the only way of setting this height correctly?

8

html and body are inside your web browser. 100vh sounds like a proper solution in this case

9

I tried using @BodySize(height = “100vh”, width = “100%”) on my configuration to apply this settings to all pages, but then I got vertical and horizontal scrollbars. It seems to me I have to add setHeight(“100vh”) manually to all vertical layouts. Not that hard, but thought there is a better solution. Anyway thanks!

10

That’s already the default. On your other pages you probably wanna use a RouterLayout like AppLayout and your views within an outer layout like header/footer/sidebar/main - so it only has to be configured once for the RouterLayout. For example AppLayout does it automatically

11

My configuration looks like this:

@SpringBootApplication
@Theme(value = "default", variant = Lumo.DARK)
@Push
@EnableScheduling
public class JavaSpringGradleTestApplication implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(JavaSpringGradleTestApplication.class, args);
    }

}

but without @BodySize it doesn’t have 100vh somehow

12

You are right, that took me by surprise. I’ve reported it. You should add either the annotation as you already did or move that body styling inside your theme

13

I found setting that annotation not valuable to me because it shows scrollbars:

image
image2559×1184 56.7 KB

However, setting setHeight(“100vh”) works perfectly, so I will use it as a solution. Again, thank you!

14

I would not recommend to use vh/vw, unless really necessary, since they translate into a fixed size and can mess up your layout, especially later, when other components are combined if you are not careful. The scrollbars on the side are already an indicator for that.

For me it seems like there is something messed up somewhere in your application. As I already said initially, it looks strange to me, that your view is not working as expected, since the code looks already good.

Therefore the question, if everything else above in the dom has a correct height: Have you checked that? If not, I would strongly recommend to do that. Maybe you have custom styling, that messes up the “root” stylings, and therefore also the height? Can you maybe show us the styles.css of your theme?

And just to be sure I retested it with the most simple application and it worked out of the box for me, so I strongly recommend to not go with the 100vh but go inspect further, what might be the issue.

As you see on the screenshot, above the vertical layout there are only a few parents in the dom. The outlet div already should have a height 100vh and therefore be enough.

My test:

image
image3737×2061 394 KB

And the code

@Route("test")
public class TestView extends VerticalLayout {

    public TestView() {
        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setAlignItems(Alignment.CENTER);
        add(new H1("Hello World!"), new LoginForm());
    }
}

@SpringBootApplication
@Push
public class Application extends SpringBootServletInitializer implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
15

Which version are you using in your example?

Because of this recent change in 24.7 - which changes the body css from vh to % it made me suspicious something is different fix: set page height to 100% instead of 100vh (#21025) (CP: 24.7) by vaadin-bot · Pull Request #21117 · vaadin/flow · GitHub

16

Tested it in a fresh downloaded starter (24.7.5) and in 24.8 alpha7

But as I said beforehand, a simple “use the dev tools and check the height of each ancestor in the dom” would be the best to trace down the issue, e.g. if maybe that pull request is the source of that issue or something else.

1 Like
17

Thanks for checking! I also took a look at some starter in which the “old” index.html is in use. Might be interesting to see what happens once that is deleted and the new framework default gets used.

But I’m sharing your point: using developer tools to find the culprit might be the easiest.

Gonna checkout the behavior next week on a computer

18

I got it working correctly by deleting /frontend and making it re-generate. Now it works just as expected, without setting setHeight(“100vh”) and without adding @BodySize. I would want to know, should I delete /frontend each time I make some changes in my code, is it actually the proper way to solve this problem, etc.

19

No, normally you do not need to do that. Deleting generated files is most times only necessary in cases like yours, where something is not working as expected to ensure, that not some cached generates are the issue or so. The maven Vaadin plugin has a special target for that, that you can call instead. That cleans the generated frontend files and other client side dependencies. But as said, that is rarely necessary