Question

我试图制作可以拖动和调整大小的对话框，并包装任意HTML格式的内容。我在一个指令中使用JQLite调整大小：mousedown在底角的div上（在我的Plunker http://plnkr.co/edit/ABQd8ZGVGeRlNWI6xIGy?p=preview中突出显示为蓝色）并拖动鼠标以调整对话框的大小。

但是，滚动时，调整大小div会与文本的其余部分一起向上移动，而不是保留在底角。其他stackoverflow用户遇到过这种情况，但他们使用的是jQueryUI而不是Angular，我不知道如何在Angular中修复它。我有一种感觉，这将归结为一些简单的HTML / CSS重新格式化，但我不知道该怎么做。任何帮助表示赞赏！上面是plunker，这里有一些相关的代码：

dialog.html :(对话框外观的代码）

.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;
 }

dialog.css：

Format

Answer 1

试试这个：

.content {
position: absolute;
top: 26px; /** so it will be under the minimize bar **/
right: 0;
bottom: 0; /** or 10px if you want it above the resize area **/
left: 0;
overflow: auto;
margin: 11px;
}

这样，内容区域将是可滚动的，而对话框的其余部分将保持不变。

滚动可防止AngularJS中的div调整大小

1 个答案: