Resizer bar not auto adapt to window size if user manual changed the splitter

Set splitter as below: <SplitPane defaultSize="50%" split="vertical"> <div>a</div> <div>b</div> </SplitPane>

At page load, the splitter will stay at the center of the window. If you change the window size, you can see the splitter is always keep in the center of the window.

Then, if you manual change the splitter, e.g., move a little to left/right, then change the window size, you will see the splitter just stay at the fixed location where it is, not auto adapt to the correct percentage location as above.

Open the image to see detail

Is that a bug? How to keep the splitter in percentage location with window size change?

Thanks.

[yuxincs]

@chris-torrence, I was hacking the source code of react-split-pane more than a year ago, so it may not apply for the code today.

The idea is to calculate a parentSize of SplitPane around this line and try to pass it into Pane class, then in Pane class (these lines) set the width and height to a percent-based string. Something like (not tested on today’s code)

if (size !== undefined) {
        if (split === 'vertical') {
          style.width = typeof size === 'string' && size.endsWith('%') ? size : size / parentSize * 100 + '%';
        } else {
          style.height = typeof size === 'string' && size.endsWith('%') ? size : size / parentSize * 100 + '%';
          style.display = 'flex';
        }
        style.flex = 'none';
      }

Hope this helps.

[chris-torrence]

hey @yxwangcs thanks for the code - I’ll give it a try!