I want to create dialog boxes that are draggable and resizable and can contain arbitrary HTML-formatted content. To achieve this, I am utilizing JQLite within a directive. The resizing functionality is triggered by a mousedown event on a div in the bottom corner (highlighted in blue in my Plunker here), allowing me to drag the mouse to resize the dialog box.
However, a problem arises when scrolling - the resize div moves up with the text instead of staying in the bottom corner. Other users on Stack Overflow faced a similar issue while using jQueryUI, but I am unsure how to address this within Angular. It seems like a simple HTML/CSS restructuring might solve the problem, but I am unsure about the exact steps to take. Any guidance on this matter would be greatly appreciated! The relevant code can be found below:
dialog.html: (code for the dialog box appearance)
<html>
<link href='dialog.css' rel='stylesheet' type='text/css'/>
<body>
<div class='dialog' ng-style="{'width': model.width+'px', 'height': model.height+'px', 'top':model.top+'px', 'left':model.left+'px', 'z-index': model.zindex}"
ng-mousedown='zorder()'>
<span class='topbar'>
<button class='minimize' ng-click="minimize()"> _ </button>
</span>
<div class='content'>
<ng-include src=model.template></ng-include>
</div>
<div class='drag'></div> //the resize div
</div>
</body>
</html>
dialog.css:
.dialog {
border: 1px black solid;
display: block;
position: absolute;
background-color: white;
overflow: auto;
}
.topbar {
border: 1px lightgrey solid;
background-color: grey;
display: block;
}
.topbar:hover {
cursor: pointer;
}
.drag {
height:10px;
width: 10px;
display: block;
position: absolute;
bottom: 0;
right: 0;
background-color: blue;
}
.drag:hover {
cursor: nwse-resize;
}
.content {
overflow: scroll;
margin: 11px;
}