After navigating between views, CSS isnt loaded properly

When i navigate between views, CSS isnt loaded properly, if i refresh the site, it works fine. This is the code in my first view :


@UIScoped
@Route("login")
@HtmlImport("frontend://styles/shared-styles.html")
public class LoginView extends Div {

and this is the code in a button i have in this view :

signinButton.addClickListener(event -> {
            // login
            if (userLogin.isLoggedIn()) { 
                UI.getCurrent().navigate("View2");
            } else {
                Notification.show("Error");
            }
        });

class userLogin merely returns a boolean variable that tells me if im logged in or not.

and this is how the second view is written

@Route("View1")
@PWA(name = "TestApp", shortName = "TestApp")
@HtmlImport("frontend://styles/shared-styles.html")
@UIScoped
public class View1 extends Div implements View, BeforeEnterObserver {

in the attachments bellow theres also screenshots of how it should look and how it looks, apologies for blurring data. As you can see, the CSS for vaadin.flow.grid isnt loaded at all, or rather its like the component doesnt fully load (u can also see that same thing happening in the orange label), this also happens, if after i get from loginview to view1, i dont refresh and go straight to view2, the grid looks the same, doesnt load properly. Again, if i refresh everything goes to how it should look.

17621500.png
17621503.png
17621506.png
17621509.png

Nejc,

Does this happen in all browsers? Also does it correct itself if you resize the screen after getting to the view?

Update:
The reason I ask about this is that I’ve experienced an issue with flow on Safari, specifically related to FormLayouts.

It may also be worthwhile to open the browser console and see if there are any 404’s when you load the page (e.g. security setting on your server)

Martin Israelsen:
Nejc,

Does this happen in all browsers? Also does it correct itself if you resize the screen after getting to the view?

Update:
The reason I ask about this is that I’ve experienced an issue with flow on Safari, specifically related to FormLayouts.

It may also be worthwhile to open the browser console and see if there are any 404’s when you load the page (e.g. security setting on your server)

Hi,

I’ve tried it with multiple browsers, chrome, firefox, opera,edge; and its the same on all of them. Also resizing doesnt fix it, only refreshing does. Its like im not navigating properly, and its skipping some steps or something.

I tried downgrading to vaadin 13 from 14, and it seems its a problem with the alpha version.

Credit to anasmi from stackoverflow.