search

tomkp / react-split-pane

React split-pane component
https://tomkp.github.io/react-split-pane
MIT License
3.23k stars 409 forks source link

Resize both panes #177

Open Knacktus opened 7 years ago

Knacktus commented 7 years ago

Usability question:

How do I change the size of both panes? Currently, one pane is dragged over the other. But I need the other also to resize.

Cheers and thanks for the great lib,

Jan

MichaelDeBoey commented 7 years ago

Make the children width: 100%

ronnyvdb commented 7 years ago

I have a horizontal split pane, and I want to show scrollbars on the second pane if the size of the pane is smaller than the content. However the second pane always has a fixed height. How can I update the height of the second pane as well when the panes are resized?

adamcurl commented 6 years ago

Any update on this? I was able to resize the bottom pane to the same size as the top pane, but I need it to be the leftover space within SpliPane. Also, when I add this logic, resizing becomes choppy and less fluid. I have a Sandbox recreating the issue here.

adamcurl commented 6 years ago

Here is the solution to properly resizing the bottom pane: https://stackoverflow.com/questions/50592209/trouble-resizing-both-panes-in-react-split-pane/50592864#50592864

walerun commented 6 years ago

@ronnyvdb @adamcurl If I got it right here is a simpler solution for that. Note how I've changed the styles for Panes, that's a clue:

.Pane1 {
    display: flex;
    min-height: 0;
  }

  .Pane2 {
    display: flex;
    min-height: 0;
  }

So it needs adjusting pane styles which maybe should be part of react-split-pane. I guess it shouldn't be an issue for v2.

raymond-ong commented 6 years ago

Thanks @walerun, it kinda works, but for 0.1.82, I noticed that for Pane1 (top pane), "display: flex;" is already in the CSS from Chrome Element inspector. So I simply have to put "overflow: auto;" for the content I put inside Pane1 and the scrollbar appears.

For Pane2 (bottom pane), I added "display: flex;". No need to put "overflow: auto;" into the content I put inside Pane2.

For completeness I put this in my CSS in my Pane2:

.Pane .horizontal .Pane2 {
  display: flex; /* to show scrollbar on the bottom pane also */
  overflow-x: hidden; /* to avoid showing the horizontal scrollbar */
}

I got my CSS selectors from the Chrome element Inspector.