Scrolling prevents div resizing in AngularJS

Question

I'm trying to make dialog boxes that can be dragged and resized and that wrap arbitrary HTML-formatted content. I resize using JQLite within a directive: mousedown over a div in the bottom corner (highlighted blue in my Plunker http://plnkr.co/edit/ABQd8ZGVGeRlNWI6xIGy?p=preview) and drag the mouse to resize the dialog box.

However, when you scroll, the resize div moves up with the rest of the text instead of remaining in the bottom corner. Other stackoverflow users have encountered this, but they were using jQueryUI instead of Angular, and I'm not sure how to fix it in Angular. I have a feeling this will come down to some simple HTML/CSS reformatting, but I'm not sure what to do. Any help is appreciated! The plunker is above, and here's some of the relevant code:

dialog.html: (the code for the appearance of the dialog boxes)

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

Ori Drori · Accepted Answer · 2015-07-27 19:25:24Z

1

Try this:

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

In this way the content area will be scrollable, while the rest of the dialog box will stay fixed.

answered Jul 27, 2015 at 19:25

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scrolling prevents div resizing in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related