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

[wangxuepeng]

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.

[wangxuepeng]

Is that a bug or design intend? any plan to resolve this? Thanks.

[death667b]

If there is a solution to this I also would like to know.

[tomkp]

This was intended - you start with a percentage value, but as soon as you move the resizer you have repositioned it, and it will then stay in that position.

Maybe this behaviour is unexpected? It could perhaps be a configuration option?

[wangxuepeng]

It's good if this can be a configuration option, especially in scenario like below:

User move the resizer to a 80% width position, then, user adjusted the window to a size less than 80% width of the original window, in such case, the resizer bar will stay in 'hidden' view and can't see or use it.

[death667b]

I also would like the ability for the user to set a percentage width or height, depending on config. If they then resize the browser the sizing stays the same.

It would also need to not go below or above min/max values - percent or static number.

[olup]

Also that would be pretty good to have a configuration option so that "everything inside" is set to percent, especially the value returned by onChange. So that we can control the react component with percentage only !

[yuxincs]

+1 if this can be implemented in the newer version. Currently hacking the code to make it percentage-wise. Thanks.@tomkp

[ct6502]

+1 for auto adapting to window size. @yxwangcs just curious, how did you hack this?

[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.

[ct6502]

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