Прокрутка предотвращает изменение размера div в AngularJS

Question

Прокрутка предотвращает изменение размера div в AngularJS

0

Я пытаюсь сделать диалоговые окна, которые можно перетаскивать и изменять размер, и которые обертывают произвольный HTML-форматированный контент. Я изменяю размер с помощью JQLite в директиве: mousedown над div в нижнем углу (выделено синим цветом в моем Plunker http://plnkr.co/edit/ABQd8ZGVGeRlNWI6xIGy?p=preview) и перетащить мышь, чтобы изменить размер диалогового окна.

Однако, когда вы прокручиваете, divize div перемещается вверх с остальной частью текста, а не остается в нижнем углу. Другие пользователи stackoverflow столкнулись с этим, но они использовали jQueryUI вместо Angular, и я не уверен, как исправить это в Angular. У меня такое чувство, что это приведет к простому переформатированию HTML/CSS, но я не уверен, что делать. Любая помощь приветствуется! Плункер выше, и вот некоторые из соответствующих кода:

dialog.html: (код появления диалоговых окон)

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

user112233 27 июль 2015, в 21:30

Источник

Теги:

jquery

html

angularjs

css

1 ответ

Ещё вопросы

Ori Drori · Accepted Answer · 2015-07-27T17-29-00.000Z

Попробуй это:

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

Таким образом, область содержимого будет прокручиваться, а остальная часть диалогового окна останется фиксированной.