Second div is getting stuck when drag-down

[admin-greyatom]

The drag down only works if I give my iframe top 50px or more. anything less than 50px second div gets stuck while dragging down. it starts again when clicked outside of SplitterLayout area.

I think this is due to some hight calculation in SplitterLayout but not able to figure out what style should I apply in my CSS in order to fix this.

drag up is working properly.

<SplitterLayout
            vertical
            percentage
            primaryIndex={0}
            secondaryInitialSize={100}
          >
            <div className="test-case-status">
              <button className="btn btn-xs btn-link close-result">Close</button>
              <div className="test-case-ins">
                 first pane text
              </div>
            </div>
            <div>
               <iframe
                  src={this.state.url}
                  width="100%"
                  height="100%"
                  frameBorder="0"
                  onLoad={this.onIframeLoaded}
                  ref={(c) => { this.iframeControl = c; }}
               />  
           <div>
</SplitterLayout>

[zesik]

Hi,

I don't feel it has anything to do with size of the secondary div. When dragging the splitter and mouse moves inside an iframe, its parent (our component) is not receiving any event and thus our splitter stops responding. This behavior is by specification and I don't know any simple fix. Please point out if I'm wrong.

However, I found this answer on StackOverflow as a workaround: disable mouse events of the iframe when drag starts and enable it after drag finishes. You can use onDragStart and onDragEnd events and do something like this:

handleDragStart() {
  this.iframeControl.style.pointerEvents = 'none';
}

handleDragEnd() {
  this.iframeControl.style.pointerEvents = 'all';
}

render() {
  return (
    <SplitterLayout onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd}>
      ...
      <div>
        <iframe ... ref={(c) => { this.iframeControl = c; }} />
      </div>
    </SplitterLayout>
  );
}

[zesik]

Closing this due to no further information.