My goal is to create a navigation bar on the left and content on the right. The current setup works well, but there is an issue with the scrollbar on the navbar pushing the resize icon inward by about 7 pixels. I am looking for a solution where the content pane can be resizable and the resize icon can be added to the west side, ensuring that the jquery will add a hidden resize div on the content side to position the resize icon correctly on the border.
Everything looks perfect without the scrollbar.
However, when scrollbars appear:
Below is the code I have implemented so far:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style>
body {
margin: 0;
background-color: #222;
}
#nav {
float: left;
border-width: 0 5px 0 0;
border-style: solid;
background-color: yellow;
width: 10%;
height: 100vh;
max-height: 100%;
overflow-x: auto;
}
#content {
background-color: brown;
width: auto;
height: 100vh;
}
</style>
<script>
$(document).ready(function() {
$('#content').resizable({
handles: 'e'
});
});
</script>
</head>
<body>
<div id="nav">This area should be scrollable and resizable with scrollbars always visible.
</div>
<div id="content">content</div>
</body>
</html>
If I can make the right side (content) resizable so the resize icon aligns with the resize border, while keeping the left side scrollable, both sides should resize as they currently do.