working demo with strange behavior: http://crawfordcomputing.com/AkadineWebOS/#/
If you grab the right div-window border and resize horizontally, It goes wonky vertically. Same for all the windows you can open with the icons. Everything is draggable too, and Jetris works. (check link for info)
This is an Angular single page app. My div-window is defined:
<div ng-repeat="pane in panes">
<div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
<div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
<span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
</div>
<div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
</div>
</div>
So the window div id="{{pane.windID}}" has two children, a title bar and a content pane. So when resizing the window I tried asloResize the content pane. That was weird since it did not account for the titlebar. So I did this: (all variables are defined previously if not defined in the function)
objParent.resizable({
handles: "n, e, s, w",
minWidth: 250,
minHeight: fullHeight,
//fullHeight is parents height, don't wanna colapse one liners
//titlebar (child0) resizes just fine due to floating
//child0 size bugs alsoResize child1, let's also it manually
resize: function (event, ui){
//subtact title height from parents height
contentHeight = objParent.innerHeight() - objChild[0].innerHeight();
//width is fine
contentWidth = objParent.innerWidth();
objChild[1].css({'width':contentWidth, 'height':contentHeight});
}
});
Now see, when resizing, I aslo want to asloResize just the content pane, not the title bar. So I am trying to set the content pane's size manually, width is fine, but content pane height equals parents height minus the title bars height.
The problem is that if you resize horizontally first, the vertical goes wonky. Once you grab the bottom and resize vertically the bug goes away, you can then resize however you want perfectly without problems. It only happens if you resize horizontally first.
Why does this happen? I doubt the bug is actually in the draggable resize function because you can stop the bug by resizing vertically first, and then it works perfect. This happens on all browsers.
Does anyone have a clue?
