Changeset 13743

Timestamp:

05/15/08 15:12:56 (6 months ago)

Author:

peller

Message:

Compute layout with padding. Fixes #6764 !strict

Location:

dijit/trunk

Files:

• layout/BorderContainer.js (modified) (6 diffs)
• tests/layout/test_BorderContainer.html (modified) (2 diffs)

dijit/trunk/layout/BorderContainer.js

@@ -135 +135 @@
                 var changedSide = /left|right/.test(changedRegion);
 
+                var cs = dojo.getComputedStyle(this.domNode);
+                var pe = dojo._getPadExtents(this.domNode, cs);
+                pe.r = parseFloat(cs.paddingRight); pe.b = parseFloat(cs.paddingBottom);
+
                 var layoutSides = !changedRegion || (!changedSide && !sidebarLayout);
                 var layoutTopBottom = !changedRegion || (changedSide && sidebarLayout);
@@ -178 +182 @@
 
                 var splitterBounds = {
-                        left: (sidebarLayout ? leftWidth + leftSplitterThickness: "0") + "px",
-                        right: (sidebarLayout ? rightWidth + rightSplitterThickness: "0") + "px"
+                        left: (sidebarLayout ? leftWidth + leftSplitterThickness: 0) + pe.l + "px",
+                        right: (sidebarLayout ? rightWidth + rightSplitterThickness: 0) + pe.r + "px"
                 };
 
                 if(topSplitter){
                         dojo.mixin(topSplitter.style, splitterBounds);
-                        topSplitter.style.top = topHeight + "px";
+                        topSplitter.style.top = topHeight + pe.t + "px";
                 }
 
                 if(bottomSplitter){
                         dojo.mixin(bottomSplitter.style, splitterBounds);
-                        bottomSplitter.style.bottom = bottomHeight + "px";
+                        bottomSplitter.style.bottom = bottomHeight + pe.b + "px";
                 }
 
                 splitterBounds = {
-                        top: (sidebarLayout ? "0" : topHeight + topSplitterThickness) + "px",
-                        bottom: (sidebarLayout ? "0" : bottomHeight + bottomSplitterThickness) + "px"
+                        top: (sidebarLayout ? 0 : topHeight + topSplitterThickness) + pe.t + "px",
+                        bottom: (sidebarLayout ? 0 : bottomHeight + bottomSplitterThickness) + pe.b + "px"
                 };
 
                 if(leftSplitter){
                         dojo.mixin(leftSplitter.style, splitterBounds);
-                        leftSplitter.style.left = leftWidth + "px";
+                        leftSplitter.style.left = leftWidth + pe.l + "px";
                 }
 
                 if(rightSplitter){
                         dojo.mixin(rightSplitter.style, splitterBounds);
-                        rightSplitter.style.right = rightWidth + "px";
+                        rightSplitter.style.right = rightWidth + pe.r +  "px";
                 }
 
                 dojo.mixin(centerStyle, {
-                        top: topHeight + topSplitterThickness + "px",
-                        left: leftWidth + leftSplitterThickness + "px",
-                        right:  rightWidth + rightSplitterThickness + "px",
-                        bottom: bottomHeight + bottomSplitterThickness + "px"
+                        top: pe.t + topHeight + topSplitterThickness + "px",
+                        left: pe.l + leftWidth + leftSplitterThickness + "px",
+                        right: pe.r + rightWidth + rightSplitterThickness + "px",
+                        bottom: pe.b + bottomHeight + bottomSplitterThickness + "px"
                 });
 
                 var bounds = {
-                        top: sidebarLayout ? "0" : centerStyle.top,
-                        bottom: sidebarLayout ? "0" : centerStyle.bottom
+                        top: sidebarLayout ? pe.t + "px" : centerStyle.top,
+                        bottom: sidebarLayout ? pe.b + "px" : centerStyle.bottom
                 };
                 dojo.mixin(leftStyle, bounds);
                 dojo.mixin(rightStyle, bounds);
-                leftStyle.left = rightStyle.right = topStyle.top = bottomStyle.bottom = "0";
+                leftStyle.left = pe.l + "px"; rightStyle.right = pe.r + "px"; topStyle.top = pe.t + "px"; bottomStyle.bottom = pe.b + "px";
                 if(sidebarLayout){
-                        topStyle.left = bottomStyle.left = leftWidth + (this.isLeftToRight() ? leftSplitterThickness : 0) + "px";
-                        topStyle.right = bottomStyle.right = rightWidth + (this.isLeftToRight() ? 0 : rightSplitterThickness) + "px";
+                        topStyle.left = bottomStyle.left = leftWidth + (this.isLeftToRight() ? leftSplitterThickness : 0) + pe.l + "px";
+                        topStyle.right = bottomStyle.right = rightWidth + (this.isLeftToRight() ? 0 : rightSplitterThickness) + pe.r + "px";
                 }else{
-                        topStyle.left = topStyle.right = bottomStyle.left = bottomStyle.right = "0";
+                        topStyle.left = bottomStyle.left = pe.l + "px";
+                        topStyle.right = bottomStyle.right = pe.r + "px";
                 }
 
@@ -236 +241 @@
                         // childNode.resize({h: int, w: int}) for each child node)
 
-                        var borderBox = function(n, b){
+                        var borderBox = function(n, b, s){
                                 n=dojo.byId(n);
-                                var s = dojo.getComputedStyle(n);
+                                s = s || dojo.getComputedStyle(n);
                                 if(!b){ return dojo._getBorderBox(n, s); }
                                 var me = dojo._getMarginExtents(n, s);
@@ -247 +252 @@
                         var resizeWidget = function(widget, dim){
                                 if(widget){
-                                        widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim);
+                                        (widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim));
                                 }
                         };
@@ -253 +258 @@
                         // TODO: use dim passed in to resize() (see _LayoutWidget.js resize())
                         // Then can make borderBox setBorderBox(), since no longer need to ever get the borderBox() size
-                        var thisBorderBox = borderBox(this.domNode);
-
-                        var containerHeight = thisBorderBox.h;
+                        var thisBorderBox = borderBox(this.domNode, null, cs);
+
+                        var containerHeight = thisBorderBox.h - pe.t - pe.b;
                         var middleHeight = containerHeight;
                         if(this._top){ middleHeight -= topHeight; }
@@ -269 +274 @@
                         resizeWidget(this._rightWidget, {h: sidebarHeight});
 
-                        var containerWidth = thisBorderBox.w;
+                        var containerWidth = thisBorderBox.w - pe.l - pe.r;
                         var middleWidth = containerWidth;
                         if(this._left){ middleWidth -= leftWidth; }

dijit/trunk/tests/layout/test_BorderContainer.html

@@ -56 +56 @@
         </script>
 </head>
-<body>
+<body class="tundra">
 
         <h2 class="testTitle">dijit.layout.BorderContainer tests</h2>
@@ -62 +62 @@
 
         <div id="border1" dojoType="dijit.layout.BorderContainer"
-                style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
+                style="padding: 5px; border: 2px solid blue; width: 90%; height: 300px; padding: 10px;">
                 <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 100px;" splitter="true">
                         top bar