weblib: MDL-17085 a function to print a collapsible region of the UI, with the collap...

diff --git a/lib/javascript-static.js b/lib/javascript-static.js
index 30cf3ada05a4fada51b8de0cd8bf9539c4728af5..fd174eafbf56e644bb2e6e70cde7da617db44020 100644 (file)
--- a/lib/javascript-static.js
+++ b/lib/javascript-static.js
@@ -626,7 +626,7 @@ function collapsible_region(id, userpref, strtooltip) {
     if (this.div.className.match(/\bcollapsed\b/)) {
         this.collapsed = true;
         var region = YAHOO.util.Region.getRegion(this.caption);
-        this.div.style.height = (region.bottom - region.top) + 'px';
+        this.div.style.height = (region.bottom - region.top + 3) + 'px';
     }
 
     // Add the appropriate image.
@@ -697,13 +697,14 @@ collapsible_region.prototype.handle_click = function(e) {
         this.animation.stop();
     }
     if (this.collapsed) {
-        var targetel = this.caption;
+        var region = YAHOO.util.Region.getRegion(this.caption);
+        var targetheight = region.bottom - region.top + 3;
     } else {
-        var targetel = this.innerdiv;
+        var region = YAHOO.util.Region.getRegion(this.innerdiv);
+        var targetheight = region.bottom - region.top + 2;
         this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
     }
-    var region = YAHOO.util.Region.getRegion(targetel);
-    this.animation.attributes.height = { to: region.bottom - region.top, unit: 'px' };
+    this.animation.attributes.height = { to: targetheight, unit: 'px' };
     this.animation.animate();
 
     // Set the appropriate icon.

diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css
index 39d0e8f45693bd4b028e07d017fd0b629e27e638..44a02fc14b00ca28debad8716cec329c2d274e87 100644 (file)
--- a/theme/standard/styles_layout.css
+++ b/theme/standard/styles_layout.css
@@ -219,6 +219,9 @@ div.groupselector {
     overflow: hidden;
     padding: 1px;
 }
+.collapsibleregioncaption {
+    white-space: nowrap;
+}
 .collapsibleregioncaption img {
     vertical-align: middle;
 }