jQueryのサイズ変更が可能な、奇妙な行動

Question

作業のデモ：あなたは右のdiv-ウィンドウ境界を取得し、水平にサイズ変更した場合http://crawfordcomputing.com/AkadineWebOS/#/

、それが垂直方向にグラグラ行きます。アイコンで開くことができるすべてのウィンドウで同じです。すべてがドラグ可能で、ジェットリスも機能します。 （情報を確認するリンク）

これは角度のシングルページアプリです。マイDIV-ウィンドウが定義されています

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

だから、ウィンドウのdivのid = "{{pane.windID}}" 2人の子供、タイトルバーとコンテンツペインがあります。したがって、ウィンドウのサイズを変更するときに、私はasloを試しました。コンテンツペインをサイズ変更してください。それはタイトルバーを説明していなかったので変だった。だから私はこれをした：（すべての変数は以前に定義されている関数内で定義されていない場合）サイズ変更時

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

は今参照してください、私は、コンテンツ・ペインではなく、タイトルバーをasloResizeたいaslo。だから私はコンテンツペインのサイズを手動で設定しようとしていますが、幅は問題ありませんが、コンテンツペインの高さは親の高さからタイトルバーの高さを差し引いたものに等しくなります。

最初に水平方向のサイズを変更すると、垂直方向がぎこちなくなります。一度底をつかんで縦にサイズを変更すると、バグは消えてしまいますが、問題なく完璧にしたい場合はサイズを変更できます。最初に水平方向のサイズを変更する場合にのみ発生します。

どうしてですか？最初に垂直方向のサイズを変更してバグを止めることができるので、バグがドラッグ可能なサイズ変更機能にあることは間違いありません。これはすべてのブラウザで発生します。

誰か手掛かりがありますか？

Answer 1

IDがwindow100-obj951のdivには、最初にCSSの高さが設定されていません。 compile="pane.content"の含まれているdivもそうではありません。

縦方向にサイズを変更すると、両方のdivのCSS高さプロパティが変更されます。

水平方向のサイズ変更は、両方の幅を変更しますが、含まれるdivの高さのみを変更します。

含まれるdivはoverflow:hiddenです。その高さが設定されている場合、含まれるdivの高さは重要ではありません。したがって、包含divの高さを持つと、含まれているdivの高さが実際に変更されているという事実がマスクされます。

[これはすべて、Firebugを使用してサイズを変更しながら要素を検査することで見ることができます]