Scroll appears when setting expand ratio to legacy component

[paodb]

Vaadin platform 22.0.28 / Vaadin framework: 8.20.0 (with compatibility mode) /MPR: 5.0.10

The following class contains some Vaadin 22 components and some Vaadin 8 components. When setting expand ratio to legacy table component, the view shows a vertical scroll bar that should not appear.

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.mpr.LegacyWrapper;
import com.vaadin.ui.TextField;
import com.vaadin.v7.ui.Table;

@Route("")
public class UITest extends VerticalLayout {

    public UITest() {

        // Legacy view
        TextField field = new TextField();

        Table table = new Table();
        table.setSizeFull();

        com.vaadin.ui.VerticalLayout layout = new com.vaadin.ui.VerticalLayout();
        layout.setSizeFull();
        layout.setSpacing(false);
        layout.addComponents(field, table);

        // Flow components
        LegacyWrapper wrapper = new LegacyWrapper(layout);
        wrapper.setSizeFull();

        Div legacyLayout = new Div();
        legacyLayout.setSizeFull();
        legacyLayout.getElement().getStyle().set("background", "lightgray");

        Button addView = new Button("Add view");
        addView.addClickListener(click -> legacyLayout.add(wrapper));

        Button removeView = new Button("Remove view");
        removeView.addClickListener(click -> legacyLayout.remove(wrapper));

        Checkbox setExpand = new Checkbox("Set expand ratio to table");
        setExpand.addValueChangeListener(change -> {
            if (change.getValue()) {
                layout.setExpandRatio(table, 1);
            } else {
                layout.setExpandRatio(table, 0);
            }
        });

        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setPadding(false);
        buttonLayout.add(addView, removeView, setExpand);

        add(buttonLayout);
        add(legacyLayout);
        setSizeFull();
        setSpacing(false);
        setPadding(false);
        setMargin(false);
        setFlexGrow(1, legacyLayout);
    }
}

Steps to reproduce:
1 - Click "Add View" button to add the legacy components and you can see a small overflow in browser. Then click checkbox to set expand ratio to table, overflow increases and Vaadin Debug Window show several "ResizeObserver loop limit exceeded (http://localhost:8080/:0:0)" notification messages.
2 - Click "Remove View" button to remove the legacy components leaving the expand ratio checkbox checked. Then click "Add View" button again and overflow is still there.

Tried different approaches like adding legacyLayout.getStyle().set("display", "flex"); or wrapper.getStyle().remove("display"); that make step 1 to lose the overflow but they don't work on step 2. When expand ratio is already set before adding the legacy components, the scroll appears.

[tltv]

For the oveflow issue, it can be fixed by adjusting layout sizes, so its not necessarily caused by a bug.
E.g. If you change Flow part of the layouts from wrapper.setSizeFull(); to wrapper.setWidth("100%"); and legacyLayout.setSizeFull(); to legacyLayout.setWidth("100%"); then adding wrapper layout should not cause overflow vertically anymore.

[paodb]

The fix that was done is not enough to fix the issue. The browser console messages about "ResizeObserver loop limit exceeded" is not longer there but still, the vertical scrollbar appears when setExpandRatio is set (please see step 2 of the steps to reproduce). Doing the changes suggested in #124 (comment) doesn't help either as the table is no longer visible if those changes are applied.

[tltv]

It needs a bit more CSS tweaking to make it work as expected. But it doesn't look anything that needs further fixes in MPR. LegacyWrapper's default property height: inherit and its parent element having display: block messed up my previous suggestion from working. Try if following code works in your app too. It overrides previously mentioned properties so that all available vertical space is properly given for the wrapper element without overflowing.
Added lines wrapper.getStyle().remove("height"); and legacyLayout.getStyle().set("display", "flex");:

public UITest() {

        // Legacy view
        TextField field = new TextField();

        Table table = new Table();
        table.setSizeFull();

        com.vaadin.ui.VerticalLayout layout = new com.vaadin.ui.VerticalLayout();
        layout.setSizeFull();
        layout.setSpacing(false);
        layout.addComponents(field, table);

        // Flow components
        LegacyWrapper wrapper = new LegacyWrapper(layout);
        wrapper.setWidth("100%");
        wrapper.getStyle().remove("height");

        Div legacyLayout = new Div();
        legacyLayout.getStyle().set("display", "flex");
        legacyLayout.setWidth("100%");
        legacyLayout.getElement().getStyle().set("background", "lightgray");

        Button addView = new Button("Add view");
        addView.addClickListener(click -> legacyLayout.add(wrapper));

        Button removeView = new Button("Remove view");
        removeView.addClickListener(click -> legacyLayout.remove(wrapper));

        Checkbox setExpand = new Checkbox("Set expand ratio to table");
        setExpand.addValueChangeListener(change -> {
            if (change.getValue()) {
                layout.setExpandRatio(table, 1);
            } else {
                layout.setExpandRatio(table, 0);
            }
        });

        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setPadding(false);
        buttonLayout.add(addView, removeView, setExpand);

        add(buttonLayout);
        add(legacyLayout);
        setSizeFull();
        setSpacing(false);
        setPadding(false);
        setMargin(false);
        setFlexGrow(1, legacyLayout);
    }

[paodb]

@tltv I tried this new approach but the vertical scrollbar still appears if setExpandRatio is checked before adding the view (step 2). I'm not sure what other css trick can fix that.

[tltv]

@paodb That looks now something else than just CSS issue. Scrollbar showed only a second in a Chrome for me while Vaadin 8 LayoutManager adjusted Table to fit. Which browser you get that effect with?

Could you also try Chrome or some other browser to see if it works different. Also I'm curious if its completely stuck showing the scrollbar or is it just very slowly adjusting layout to its final stage.
Can you run it in development mode and see any messages in the browser console after the scrollbar appears? Just to confirm if layout manager is still calculating sizes.

[tltv]

Overflow issue is reproducible with a Vaadin 8 Framework alone. Below is a link to sample application with a similar HTML structure as with Flow + MPR LegacyLayout. Difference is that V8 just hides the overflowing part. With MPR we get that scrollbar depending on browser's and OS scaling settings.

Test app has also workaround implemented by using CssLayout only. Same workaround helps also with MPR.

testapp_vaadin8.zip

[mshabarov]

@TatuLund could your team take over this issue, since this is reproducible with V8 standalone app ?

[TatuLund]

Yes, we are studying it.

[johannest]

Part of the remaining issue can be fixed with the runAfterRoundTrip workaround from @Ansku:

UI.getCurrent().runAfterRoundTrip(() -> {
            layout.setExpandRatio(splitPanel, 1);
            right.setExpandRatio(table, 1);
        });

That helps with the initial rendering. However if after initial rendering the browser window height is reduced the scrollbar appears again. Sometimes increasing the height fixes the issue and scrollbar disappears, but every time the height is reduced, the scrollbar appears again:

The only thing I found which helps consistently is setting the height of the Table less than 100% (for example 99% works fine).

This issue does not seem to reproduce without MPR, also if replacing Table with V8 Grid the issue does not reproduce for me.

Example code with the runAfterRoundTrip and the Table height workarounds, comment line table.setHeight("99%"); to see the issue demonstrated in above screen recording.

@Route("testx")
public class TestRouteWithLegacyStuff extends VerticalLayout {
    public TestRouteWithLegacyStuff() {
        // LEFT SIDE
        com.vaadin.ui.VerticalLayout left = new com.vaadin.ui.VerticalLayout();
        left.setWidthFull();
        left.setSpacing(false);

        for (int i = 0; i < 10; i++) {
            com.vaadin.ui.Button button = new com.vaadin.ui.Button("Test");
            left.addComponent(button);
        }

        // RIGHT SIDE
        TextField field2 = new TextField();
        Table table = new Table();
        table.setSizeFull();
        // workaround:
        table.setHeight("99%");

        com.vaadin.ui.VerticalLayout right = new com.vaadin.ui.VerticalLayout();
        right.setSizeFull();
        right.setSpacing(false);
        right.setMargin(false);
        right.addComponent(field2);
        right.addComponent(table);

        // MAIN LAYOUT V8
        HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
        splitPanel.setSizeFull();
        splitPanel.addComponent(left);
        splitPanel.addComponent(right);

        MenuBar menu = new MenuBar();
        menu.setWidthFull();
        menu.addItem("Save");
        menu.addItem("Undo");

        com.vaadin.ui.VerticalLayout layout = new com.vaadin.ui.VerticalLayout();
        layout.setSizeFull();
        layout.setSpacing(false);
        layout.setMargin(false);
        layout.addComponent(menu);
        layout.addComponents(splitPanel);

       // workaround:
        UI.getCurrent().runAfterRoundTrip(() -> {
            layout.setExpandRatio(splitPanel, 1);
            right.setExpandRatio(table, 1);
        });

        // FLOW COMPONENTS
        LegacyWrapper wrapper = new LegacyWrapper(layout);
        wrapper.setWidth("100%");
        wrapper.getStyle().remove("height");

        Div legacyLayout = new Div();
        legacyLayout.setSizeFull();
        legacyLayout.setWidth("100%");
        legacyLayout.getStyle().set("display", "flex");
        legacyLayout.getElement().getStyle().set("background", "lightgray");

        Button addView = new Button("Add view");
        addView.addClickListener(click -> legacyLayout.add(wrapper));

        Button removeView = new Button("Remove view");
        removeView.addClickListener(click -> legacyLayout.remove(wrapper));

        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setPadding(false);
        buttonLayout.add(addView, removeView);

        add(buttonLayout);
        add(legacyLayout);
        setSizeFull();
        setSpacing(false);
        setPadding(false);
        setMargin(false);
        setFlexGrow(1, legacyLayout);
    }
}