Splitpanes is a Vue.js library that enables pane splitting and resizing, as shown below.
GitHub - antoniandre/splitpanes: A Vue 3 (and 2) reliable, simple and touch-ready panes splitter / resizer.
A Vue 3 (and 2) reliable, simple and touch-ready panes splitter / resizer. - antoniandre/splitpanes

When using this library, I encountered an issue where resizing did not work properly when a pane contained an iframe element. A solution was described in the following pull request.
Add `preventPointerEvents` API by DLillard0 · Pull Request #162 · antoniandre/splitpanes
Resizing will fail when there is an object element or iframe element inside the component, because the element hijacks mouse events and the document‘s mouse events will not work.
<splitpanes sty...
As described there, adding the following CSS resolved the issue and allowed correct resize operations even with panes containing iframe elements.
.splitpanes--dragging .splitpanes__pane {
pointer-events: none;
}
I hope this helps anyone experiencing the same issue.



Comments
…