split-pane
split-pane copied to clipboard
shagstrom
Problem after v0.9.2 when using iframe as component content
The resize events from the divider do not respond properly when dragging over top of the iframe after changes made between v0.9.2 and v0.9.3.
Place the following in a file for an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Basic Example</title>
<link rel="stylesheet" href="../split-pane.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="../split-pane.js"></script>
<style type="text/css">
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.split-pane-divider {
background: #aaa;
}
#left-component {
width: 20em;
}
#divider {
left: 20em; /* same as left component width */
width: 5px;
}
#right-component {
left: 20em;
margin-left: 5px; /* same as divider width */
}
</style>
<script>
$(function() {
$('div.split-pane').splitPane();
$('.split-pane-divider').on('click', function () {
console.log("click");
})
});
</script>
</head>
<body>
<div id="split-pane-1" class="split-pane fixed-left">
<div class="split-pane-component" id="left-component">
This is the left component
</div>
<div class="split-pane-divider" id="divider"></div>
<div class="split-pane-component" id="right-component">
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
<button onclick="$('div.split-pane').splitPane('firstComponentSize', 0);">Collapse first component</button>
</div>
</div>
</body>
</html>
