Split Layout is accidentely vertical but after reload it works

General
1

Hi,

i have a split layout (horizontal) but once i restart the app the split layout is vertical and i see in browser console following error

image
image2268×328 58.4 KB

once i reload the page it works and the issue is gone. When i use another browser, its the same behaviour.

Does anyone has an idea what the issue could mean? its vaadin 24.6.0 but as well in 24.5.8. Locally in IDE it works. The issue comes only after building it for production

 public ProductView() {
        setId("products-view");
        this.setHeight("100vh");
        this.setSpacing(false);
        this.setPadding(false);
        this.setWidthFull();
        this.getStyle().set("padding-left", "1px");
        SplitLayout splitLayout = new SplitLayout();
        splitLayout.setOrientation(SplitLayout.Orientation.HORIZONTAL);
        splitLayout.setSplitterPosition(25);
        splitLayout.setHeight("90vh");
        splitLayout.setWidthFull();
        labeltTotalProducts = new Span("No Results");

        splitLayout.addToPrimary(createCategoryDiv());
        splitLayout.addToSecondary(createProductsGridDiv());
        splitLayout.getStyle().set("margin-top", "-10px");

        ColoredVerticalLayout coloredVerticalLayout = new ColoredVerticalLayout(createFilter(), getTranslation("productsAndCategories"), VaadinIcon.FORM);
        coloredVerticalLayout.setSpacing(false);
        coloredVerticalLayout.setHeight("90vh");

        coloredVerticalLayout.add(splitLayout);
        add(coloredVerticalLayout);
    }

The Colored VerticalLayout is just a custom component with a colored bar.

3

I wasn’t able to reproduce this in a starter. Based on the JS error, I would guess that the web component isn’t loaded at all and thus the contents are just displayed below each other. In that case you also wouldn’t see the splitter / divider and the element wouldn’t have a shadow root in the browser dev tools.

If it works after a reload then that sounds like a caching issue. You could try clearing the browser cache and see if it then starts working without a reload.

4

Hi unfortunately it doesnt helped to clean the browser history :/