vaadinvaadin12

Vaadin's SplitLayout.setSplitterPosition(80) only works the first time; subsequent calls do not seem to respond

In Vaadin 12, I have created a button which, when clicked, sets the split layout position to some non-zero, non-100 value, as shown below:

  btnHelp.addClickListener(event -> {
            log.info("info pressed");
            MainApp.sp.setSplitterPosition(80);
            MainApp.iFrameHelp = new Html(          "<iframe src=\"https://docs.readthedocs.io/en/latest/intro/getting-started-with-sphinx.html/intro/getting-started-with-sphinx.html\"></iframe>");
            //btnHelp.setIcon(new Icon(VaadinIcon.INFO_CIRCLE));
        });

This works great. However, if I pretend to be a user and, via the Chrome browser, I adjust the split layout (by dragging the vertical layout) such that I "close" (or just reduce the size of) the second vertical "panel", and THEN I click on the button again, it does NOT seem to obey the command to reset the splitter position to 80. It only seems to obey the command on the first call. Is this a bug? If so, is there a workaround? (Or, should I do this differently?)

Solution

  • This is a side effect of https://github.com/vaadin/vaadin-split-layout-flow/issues/50. What happens is basically that the server-side still believes that the split position is set to 80 which makes it ignore the setSplitterPosition(80) call.

    You can work around this by using low-level APIs to set the position in a way that bypasses the server's dirty checking logic: 

    MainApp.sp.getPrimaryComponent().getElement().executeJavaScript(
    "this.style.flexBasis='80%'");
MainApp.sp.getSecondaryComponent().getElement().executeJavaScript(
    "this.style.flexBasis='20%'");