From 94831fe507e2c7389aa2211028d21d51a2ab8f3c Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Tue, 15 Jul 2014 13:35:30 -0400 Subject: [PATCH 1/8] Accordion: heightStyle: 'auto' has problems Fixes #9264 Using .show method and outerHeight property to force height calculation when heightStyle='auto' --- ui/accordion.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index 5b748a3f22c..1837281f637 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -351,10 +351,13 @@ return $.widget( "ui.accordion", { } else if ( heightStyle === "auto" ) { maxHeight = 0; this.headers.next() + .show() .each(function() { - maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); + maxHeight = Math.max( maxHeight, $( this ).outerHeight() ); }) - .height( maxHeight ); + .height( maxHeight ) + .not( this.active.next() ) + .hide(); } }, From f443e2a128c529c1217b32ab1dfecec542e8b930 Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Tue, 22 Jul 2014 13:59:14 -0400 Subject: [PATCH 2/8] Accordion: heightStyle: 'auto' has problems reverted to original use of "height" instead of "outerHeight" ref #9264 --- ui/accordion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/accordion.js b/ui/accordion.js index 1837281f637..aed276fe089 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -353,7 +353,7 @@ return $.widget( "ui.accordion", { this.headers.next() .show() .each(function() { - maxHeight = Math.max( maxHeight, $( this ).outerHeight() ); + maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); }) .height( maxHeight ) .not( this.active.next() ) From e0d8dfa96dd4fd1850a1c153b2454e9fc0c8929a Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Wed, 23 Jul 2014 15:39:11 -0400 Subject: [PATCH 3/8] Accordion: heightStyle: 'auto' has problems removed stray whitespace ref #9264 --- ui/accordion.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index aed276fe089..ba7c39663f4 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -550,9 +550,10 @@ return $.widget( "ui.accordion", { fx.now = Math.round( now ); if ( fx.prop !== "height" ) { adjust += fx.now; - } else if ( that.options.heightStyle !== "content" ) { - fx.now = Math.round( total - toHide.outerHeight() - adjust ); - adjust = 0; + } else if ( that.options.heightStyle !== "content" && + that.options.heightStyle !== "auto" ) { + fx.now = Math.round( total - toHide.outerHeight() - adjust); + adjust = 0; } } }); From d2b763b4d71e381685c190c384f80d2e14a46bf8 Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Thu, 14 Aug 2014 16:47:54 -0400 Subject: [PATCH 4/8] Accordion: heightStyle: 'auto' has problems Updated _animate to account for box-sizing: border-box. Minor formatting changes. ref #9264 --- ui/accordion.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index ba7c39663f4..d79ab29fe9a 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -355,9 +355,9 @@ return $.widget( "ui.accordion", { .each(function() { maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); }) - .height( maxHeight ) - .not( this.active.next() ) - .hide(); + .height( maxHeight ) + .not( this.active.next() ) + .hide(); } }, @@ -550,10 +550,13 @@ return $.widget( "ui.accordion", { fx.now = Math.round( now ); if ( fx.prop !== "height" ) { adjust += fx.now; - } else if ( that.options.heightStyle !== "content" && - that.options.heightStyle !== "auto" ) { - fx.now = Math.round( total - toHide.outerHeight() - adjust); - adjust = 0; + } else if ( that.options.heightStyle === "auto" && + toHide.css( "box-sizing" ) === "border-box") { + fx.now = Math.round( total - toHide.outerHeight()); + adjust = 0; + } else if ( that.options.heightStyle != "content" ) { + fx.now = Math.round( total - toHide.outerHeight() - adjust); + adjust = 0; } } }); From 827234aacd522f17d9ab0c46ddf883b230f1e9fc Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Mon, 18 Aug 2014 12:14:01 -0400 Subject: [PATCH 5/8] Accordion: heightStyle: 'auto' has problems Cleaned up some linting issues Ref #9264 --- ui/accordion.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index d79ab29fe9a..7c3c02ed902 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -550,11 +550,11 @@ return $.widget( "ui.accordion", { fx.now = Math.round( now ); if ( fx.prop !== "height" ) { adjust += fx.now; - } else if ( that.options.heightStyle === "auto" && + } else if ( that.options.heightStyle === "auto" && toHide.css( "box-sizing" ) === "border-box") { fx.now = Math.round( total - toHide.outerHeight()); adjust = 0; - } else if ( that.options.heightStyle != "content" ) { + } else if ( that.options.heightStyle !== "content" ) { fx.now = Math.round( total - toHide.outerHeight() - adjust); adjust = 0; } From a2b75b5b3ff0efb0def2bcb3397f1b064e3db0a5 Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Mon, 25 Aug 2014 15:24:36 -0400 Subject: [PATCH 6/8] Accordion: heightStyle: 'auto' has problems Added test for padding-box Ref #9264 --- ui/accordion.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/ui/accordion.js b/ui/accordion.js index 212aa187fae..74be1d2335e 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -557,15 +557,19 @@ return $.widget( "ui.accordion", { complete: complete, step: function( now, fx ) { fx.now = Math.round( now ); - if ( fx.prop !== "height" ) { - adjust += fx.now; - } else if ( that.options.heightStyle === "auto" && - toHide.css( "box-sizing" ) === "border-box") { - fx.now = Math.round( total - toHide.outerHeight()); - adjust = 0; - } else if ( that.options.heightStyle !== "content" ) { - fx.now = Math.round( total - toHide.outerHeight() - adjust); - adjust = 0; + if ( !fx.adjustInit ) { + if ( fx.prop !== "height" ) { + adjust += fx.now; + } else if ( that.options.heightStyle !== "content" && + ( toHide.css( "box-sizing" ) === "border-box" || + toHide.css( "box-sizing" ) === "padding-box" ) ) { + fx.now = Math.round( total - toHide.outerHeight() ); + adjust = 0; + } else if ( that.options.heightStyle !== "content" ) { + fx.now = Math.round( total - toHide.outerHeight() - adjust); + adjust = 0; + } + fx.adjustInit = true; } } }); From 23167de5f1f5a76a3d4b559d2ad53b13b5b23f17 Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Mon, 10 Nov 2014 16:11:36 -0500 Subject: [PATCH 7/8] Accordion: heightStyle: 'auto' has problems Removed test for padding-box and added testcase default_9264.html to visual dir Ref #9264 --- tests/visual/accordion/default_9264.html | 102 +++++++++++++++++++++++ ui/accordion.js | 11 ++- 2 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 tests/visual/accordion/default_9264.html diff --git a/tests/visual/accordion/default_9264.html b/tests/visual/accordion/default_9264.html new file mode 100644 index 00000000000..28dcf24f484 --- /dev/null +++ b/tests/visual/accordion/default_9264.html @@ -0,0 +1,102 @@ + + + + + jQuery UI Accordion - Default functionality + + + + + + + + + + + + +
+ This is a copy of demos/accordion/default.html, modified to constrain the width of the accordion. This was done to mimic the conditions outlined in http://bugs.jqueryui.com/ticket/9264 +
+ +
+
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+
+

+Click headers to expand/collapse content that is broken into logical sections, much like tabs. +Optionally, toggle sections open/closed on mouseover. +

+

+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is +usable without JavaScript. +

+
+ + diff --git a/ui/accordion.js b/ui/accordion.js index cdb467a78e8..7610f6c6e3c 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -565,11 +565,16 @@ return $.widget( "ui.accordion", { if ( !fx.adjustInit ) { if ( fx.prop !== "height" ) { adjust += fx.now; + // padding-box: exclude padding } else if ( that.options.heightStyle !== "content" && - ( toHide.css( "box-sizing" ) === "border-box" || - toHide.css( "box-sizing" ) === "padding-box" ) ) { + toHide.css( "box-sizing" ) === "padding-box" ) { + // per conversation with @scottgonzalez and @mikesherov + // let's just handle border-box and content-box. + // border-box: exclude all props + } else if ( that.options.heightStyle !== "content" && + toHide.css( "box-sizing" ) === "border-box" ) { fx.now = Math.round( total - toHide.outerHeight() ); - adjust = 0; + // content-box: include all props } else if ( that.options.heightStyle !== "content" ) { fx.now = Math.round( total - toHide.outerHeight() - adjust); adjust = 0; From 192b7b0ff44ebee98cb22bfee06a3531b3503b61 Mon Sep 17 00:00:00 2001 From: Jacques Perrault Date: Thu, 13 Nov 2014 18:06:13 -0500 Subject: [PATCH 8/8] Accordion: heightStyle: 'auto' has problems Added code to resolve race condition Ref #9264 --- ui/accordion.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/accordion.js b/ui/accordion.js index 7610f6c6e3c..dbed63f31a1 100644 --- a/ui/accordion.js +++ b/ui/accordion.js @@ -371,6 +371,7 @@ return $.widget( "ui.accordion", { }) .height( maxHeight ) .not( this.active.next() ) + .css( "display", "" ) .hide(); } },