Can't set the splitterposition after moving the splitter manually

[limonte]

From @lennartkuell on December 11, 2018 8:48

I tried to set the position in the code with .setSplitterPosition(90). This works fine, but it won't change the position, if I moved the splitter manually with my mouse before. So once I use the mouse to move the splitter, setSplitterPosition shows no effect anymore.
The reason seems to be, that moving the splitter with the mouse sets the "flex" attribute as style of the children, while setting it with setSplitterPosition sets the "height" attribute. I also tried to remove the flex attribute in the code, but this does not work, because the flex attribute isn't set in the children. I checked this with with splitLayout.getPrimaryComponent().getElement().getStyle().

I tested this with both Firefox and Chromium on LinuxMint and Chromium on Ubuntu.

Copied from original issue: vaadin/vaadin-split-layout#126

[limonte]

Works fine on the front-end side, see the "Initial Splitter Position
" example here: https://cdn.vaadin.com/vaadin-split-layout/4.1.0/demo/#split-layout-basic-demos

Moving to flow for further investigation...

[denis-anisimov]

Source code to reproduce:

public class SplitPositionPage extends Div {

    public SplitPositionPage() {
        SplitLayout layout = new SplitLayout(
                new Label("First content component"),
                new Label("Second content component"));

        NativeButton button = new NativeButton(
                "Set split position to the middle",
                event -> layout.setSplitterPosition(0.5));
        add(layout, button);

    }
}

[EvaGillen]

You can set the flex instead of setting the splitter position. e.g. splitLayout.getPrimaryComponent().getElement().getStyle().set("flex","100%"); splitLayout.getSecondaryComponent().getElement().getStyle().set("flex","0%"); It's the same result and works after moving the splitter manually.

[rolfsmeds]

The above workaround only works to a point: if you set the flex-basis e.g. to 100% on the left side, then move the splitter and try to do the same again, nothing happens (the style property is unchanged on client, probably because Flow thinks that the value is unchanged since last set).

setSplitPosition(double), meanwhile, seems to use width instead of flex-basis, which is at the very least weird and possibly the reason for it not working properly.

The only workaround I found that works consistently is to vary the flex-basis set on the sides each time (e.g. by 1px) so that Flow actually transmits the change to the client.