Doesn't work well with iframes

[ngerritsen]

If I try to embed iframes in the split panes the dragging doesnt work very well. As soon as the mouse enters the iframe it stops dragging. Is there any way to fix this?

Regards

[antal-bukos]

A workaround for this is adding an overlay to cover the whole iframe so that it will catch all mouse events.
(pseudo coffeescript code)

SplitPane {},
  div
    className: 'left-pane'
    'content'
  div
    className: 'right-pane',
    div
      id: 'overlay'
    iframe

If your iframe doesn't have any clickable areas you should be all set at this point.
If you have links in the iframe you'll need a way to click them through the overlay, pointer-events: none on the overlay allows clicking but it also prevents the dragging from happening. So the solution is a combination of the splitpane's onChange property and mouseup listener:

• have the overlay hidden by default
• show it onChange
• hide it again on mouseup

document.addEventListener 'mouseup', ->
  document.getElementById('overlay').style.display = 'none'

SplitPane
  onChange: ->
    document.getElementById('overlay').style.display = 'block'
  ,
  div
    className: 'left-pane'
    'content'
  div
    className: 'right-pane',
    div
      id: 'overlay'
    iframe

Hope this helps.

[antal-bukos]

With suggested pull request #37 the above code could be changed to:

SplitPane
  onChange: ->
    document.getElementById('overlay').style.display = 'block'
  onDragFinished: ->
    document.getElementById('overlay').style.display = 'none'
  ,
  div
    className: 'left-pane'
    'content'
  div
    className: 'right-pane',
    div
      id: 'overlay'
    iframe

[NathanBWaters]

Here's an example of how I got it work:

// ----------------------
// index.js
// ----------------------
import React from 'react';
import SplitPane from 'react-split-pane';
import classNames from 'classnames';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);

    // This state is tracking whether or not the user is dragging the SplitPane borders to change
    // its sizing.  If so, then we have to set the child elements to "pointer-events: none" so
    // the child events don't prevent smooth dragging
    this.state = {
      isDragging: false,
    }
  }

  render() {
    const toggleInteractive = classNames([
      { [styles.notInteractive]: this.state.isDragging === true },
      { [styles.isInteractive]: this.state.isDragging === false },
    ]);

    return (
      {/* Due to the iFrames interaction with SplitPane we have to set the children
          of SplitPane to "pointer-events: none" in the styling so that the dragging
          of panels works correctly. */}
      <SplitPane onDragStarted={() => {
                    this.setState({
                      isDragging: true,
                    });
                 }}
                 onDragFinished={() => {
                    this.setState({
                      isDragging: false,
                    });
                 }}
                 split="horizontal"
                 defaultSize="70%"
      >
        <div className={toggleInteractive}>
          <TopComponentExample />
        </div>
        <div className={toggleInteractive}>
          <BottomComponentExample />
        </div>
      </SplitPane>
    );
  }
}

// ----------------------
// styles.css
// ----------------------
.notInteractive {
  pointer-events: none;
}

.isInteractive {
  pointer-events: auto;
}

[NathanBWaters]

The only problem with the above solution is that it doesn't allow you to scroll with just your mouse afterwards. If you click on the iFrame though, then you can scroll. Let me know if you have ideas on how to fix that problem.

[leinonen]

Works wonders! Thanks @NathanBWaters !

[robertf224]

@NathanBWaters so this is definitely a chrome bug (that re-enabling pointer-events after disabling does not restore proper behavior for an iframe child). was running into the same problem, tested on firefox and it works as expected. issued a bug report upstream with a minimal example (http://bit.ly/2hhatch)

[AravindTReddy]

Still having issues when using iframe. Any help? Thanks

[sytolk]

this fork works well with iframes: https://github.com/quarkw/react-split-pane
Can we merge PR for this?