Search code examples
javascriptreactjs

react-split-pane cannot resize

I just installed react-split-pane in my application, but it does not seem to work.

I'm using react-split-pane version 0.1.68 but I tested it with 0.1.66 and 0.1.64 as well.

This is my component: 

import React, { Component } from 'react';
import SplitPane from 'react-split-pane';

class Edit extends Component {
  render() {
    return (
        <SplitPane split="vertical">
            <div style={{backgroundColor: 'red'}}>LEFT</div>
            <div style={{backgroundColor: 'blue'}}>RIGHT</div>
        </SplitPane>
    );
  }
}

export default Edit;

I end up with a component that looks like I how styled it, but dragging between the elements to resize the width of the elements does not work.

enter image description here

What am I missing here?

Ps this issue might be related to it, but I tried previous versions and they don't seem to work either.

Solution

  • I had a similar problem. The reason why divider doesn't work is: missing CSS

    Add CSS from tutorial: https://github.com/tomkp/react-split-pane#example-styling to your react component. For example:

    import './edit.css';

    Your dragging element will work. enter image description here