Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

split's mode is 'vertical',pane2 include a tabs, every tab in tabs have a iframe in it,so drag the Resizer move so slowly #241

Open
liangd407 opened this issue Jan 2, 2018 · 6 comments

Comments

@liangd407
Copy link

No description provided.

@liangd407
Copy link
Author

how to handle the problem: element in pane2 has a iframe ?

@pomber
Copy link

pomber commented Sep 12, 2018

See #30

@lijunsong
Copy link

Instead of asking users to bypass the issue with pointer-events: none on dragging, why not just set pointer-events to none directly in the library. After all, this is how split.js.org implements the drag and I didn't even notice this was an issue until I switched to this library.

@nvh95
Copy link

nvh95 commented Aug 20, 2020

I totally agree with @lijunsong.
@tomkp This is my story: I apply method from #30 (comment) to resolve a similar problem in 2018 October. This morning (August 2020), I faced the exact same issue 2 years ago (in a different repo forked from the repo in 2018). It took me 30 minutes to figure the root cause then apply the patch.

In 2018, I have something like this

<SplitPane
   split="vertical"
   size="360px"
   pane2Style={{
       pointerEvents: isDragging ? 'none' : 'auto',
    }}
    onDragStarted={() => { this.setState({ isDragging: true }); }}
    onDragFinished={() => { this.setState({ isDragging: false }); }}
>
  {/* Left Pane */}
  <div>
     Something
  </div>
  {/* Right Pane */}
  <div>
     <iframe />
  </div>
</SplitPane>

It worked since my iframe was in the right side (I used pane2Style). And in 2020, my iframe is in the left side🙈. I didn't notice that, something like this:

<SplitPane
     split="vertical"
      size="360px"
      pane2Style={{
         pointerEvents: isDragging ? 'none' : 'auto',
      }}
      onDragStarted={() => { this.setState({ isDragging: true }); }}
      onDragFinished={() => { this.setState({ isDragging: false }); }}
>
  {/* Left Pane */}
  <div>
     <iframe />
  </div>
   {/* Right Pane */}
  <div>
     Another div
  </div>
</SplitPane>

I have to change pane2Style to pane1Style, or add both if I don't want to see this issue in the future. I think the best way to avoid this issue is to add pointer-events itself in the library. What do you think? If that's good. I can make a PR. Thanks

@SeanBurt
Copy link

good

@liangd407
Copy link
Author

liangd407 commented Jun 15, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants