Skip to content

Setting splitter position of SplitLayout in any unit #8173

@vikkkgut

Description

@vikkkgut

Describe your motivation

My main layout consists of a horizontal SplitLayout with a menu to the left, and the screen area to the right.
It makes sense to set the initial splitter position to a number of characters, so that the users sees the same menu no matter their screen size.

We also have an optional drawer on the right side where the same applies.
Btw; Today I have to do that as SplitLayout(left, SplitLayout(center, right))
It would be awesome if that could've been SplitLayout(left, center, right)

In the main screen area we use a vertical SplitLayout(list, detail). We initially set the split position to 100%, and when a row is chosen we want to "minimize" the list. Here it also makes sense to do that as a fixed number of "rows" instead of some percentage.

Describe the solution you'd like

splitLayout.setSplitterPosition(10, Unit.REM);

or, if we have more than 2 areas in a SplitLayout, we might need to make it clear which is fixed:
splitLayout.setSize(left, 20, Unit.CH);
splitLayout.setSize(right, 20, Unit.CH);

Describe alternatives you've considered

For the main application frame we have considered using AppLayout, but our TreeGrid menu is several levels deep, and we don't want to set a fixed, wide, width that works for the deeper levels.

Instead I have a working MySplitLayout extends SplitLayout.
Core part is:

private void updateStylesForSplitterPosition() {
    // Vaadin sets flex-basis (3rd parm to flex) to X% for primary, and 100-X% on secondary.
    // Looks like it is enough to set size on just one of them, and the other one will get "the rest"
    if(sizePrimary!=null) {
        setPrimaryStyle("flex", String.format("0 0 %s%s", sizePrimary, unit));
        setSecondaryStyle("flex", "1 1");
    }
    else if(sizeSecondary!=null) {
        setPrimaryStyle("flex", "1 1");
        setSecondaryStyle("flex", String.format("0 0 %s%s", sizeSecondary, unit));
    }
}

This seems to work reasonably well, but I always worry that it might stop working in the next version.

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions