Not work (Can not resize)

I use project created by create-react-app and replace src/index.js as follow:

import React from 'react';
import ReactDOM from 'react-dom';
import SplitPane from 'react-split-pane';

ReactDOM.render(
  <SplitPane split="vertical" minSize={50} defaultSize={100}>
    <div style={{background: 'red', height: window.innerHeight}}></div>
    <div></div>
   </SplitPane>, document.getElementById('root'));

And then npm start. I can see the panel but can not resize it.

[dienluong]

I stumbled into this problem as well. After much debugging, I decided to add the styles and it worked.

I think the documentation should mention that you absolutely need to manually apply styles to the resizer – currently, it is not clear you must do this.

Thanks much.

[tomkp]

Hi - The resizer has no default styling - so you will need to import the styling for the resizer as well…

If you add the following to a css file and import it, then it should work…

Let me know if you have any problems.

.Resizer {
        background: #000;
        opacity: .2;
        z-index: 1;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -moz-background-clip: padding;
        -webkit-background-clip: padding;
        background-clip: padding-box;
    }

     .Resizer:hover {
        -webkit-transition: all 2s ease;
        transition: all 2s ease;
    }

     .Resizer.horizontal {
        height: 11px;
        margin: -5px 0;
        border-top: 5px solid rgba(255, 255, 255, 0);
        border-bottom: 5px solid rgba(255, 255, 255, 0);
        cursor: row-resize;
        width: 100%;
    }

    .Resizer.horizontal:hover {
        border-top: 5px solid rgba(0, 0, 0, 0.5);
        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    }

    .Resizer.vertical {
        width: 11px;
        margin: 0 -5px;
        border-left: 5px solid rgba(255, 255, 255, 0);
        border-right: 5px solid rgba(255, 255, 255, 0);
        cursor: col-resize;
    }

    .Resizer.vertical:hover {
        border-left: 5px solid rgba(0, 0, 0, 0.5);
        border-right: 5px solid rgba(0, 0, 0, 0.5);
    }
    .Resizer.disabled {
      cursor: not-allowed;
    }
    .Resizer.disabled:hover {
      border-color: transparent;
    }