added support for hidden elements, closes #12

liabru · Jun 27, 2014 · 9a8944b · 9a8944b
1 parent 246820d
commit 9a8944b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -18,8 +18,9 @@ See the [jquery.matchHeight.js demo](https://brm.io/jquery-match-height-demo).
 - row aware, handles floating elements
 - responsive, automatically updates on window resize (can be throttled for performance)
 - handles mixed `padding`, `margin`, `border` values (even if every element has them different)
-- accounts for `box-sizing`
 - handles images and other media (updates automatically after loading)
+- handles hidden or none-visible elements (e.g. those inside tab controls)
+- accounts for `box-sizing`
 - data attributes API
 - tested in IE8+, Chrome, Firefox, Chrome Android
 - can be removed when needed

diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -78,6 +78,10 @@
             var $row = $(row),
                 maxHeight = 0;
 
+            // ensure elements are visible to prevent 0 height
+            var hiddenParents = $row.parents().add($row).filter(':hidden');
+            hiddenParents.css({ 'display': 'block' });
+
             // iterate the row and find the max height
             $row.each(function(){
                 var $that = $(this);
@@ -93,6 +97,9 @@
                 $that.css({ 'display': '' });
             });
 
+            // revert display block
+            hiddenParents.css({ 'display': '' });
+
             // iterate the row and apply the height to all elements
             $row.each(function(){
                 var $that = $(this),

diff --git a/test.css b/test.css
@@ -72,7 +72,8 @@ a, a:link, a:visited, a:active, a:hover {
     margin: 5px 20px 5px 0;
 }
 
-.test-remove {
+.btn-remove,
+.btn-hidden {
     margin: -8px 20px 0 20px;
     line-height: 1;
     border: 0;
@@ -236,4 +237,16 @@ a, a:link, a:visited, a:active, a:hover {
         margin-left: 0;
         margin-right: 0;
     }
+}
+
+/* test hidden */
+
+.test-hidden .hidden-items > .item-0,
+.test-hidden .hidden-items > .item-2 {
+    display: none;
+}
+
+.test-hidden .hidden-items > .item-1,
+.test-hidden .hidden-items > .item-3 {
+    visibility: hidden;
 }
diff --git a/test.html b/test.html
@@ -30,17 +30,22 @@
                     });
 
                     // example of removing matchHeight
-                    $('.test-remove').click(function() {
+                    $('.btn-remove').click(function() {
                         $('.items-container').each(function() {
                             $(this).children('.item').matchHeight('remove');
                         });
                     });
+
+                    // button to show hidden elements
+                    $('.btn-hidden').click(function() {
+                        $('body').removeClass('test-hidden');
+                    });
                 });
 
             })();
         </script>
     </head>
-    <body class="test-match-height test-rows test-responsive test-border-box test-margin test-padding">
+    <body class="test-match-height test-rows test-responsive test-border-box test-margin test-padding test-hidden">
         <div class="container">
             <h1>jquery.matchHeight Tests</h1>
 
@@ -86,7 +91,12 @@ <h1>jquery.matchHeight Tests</h1>
                 </div>
                 <div class="checkbox">
                     <label>
-                        <input class="test-remove" type="submit" value="remove matchHeight">
+                        <input class="btn-remove" type="submit" value="remove matchHeight">
+                    </label>
+                </div>
+                <div class="checkbox">
+                    <label>
+                        <input class="btn-hidden" type="submit" value="show hidden">
                     </label>
                 </div>
             </div>
@@ -206,6 +216,35 @@ <h3>data-mh="items-b"</h3>
                     <p>Fixed height</p>
                 </div>
             </div>
+
+            <div class="items-container hidden-items">
+                <div class="item item-0">
+                    <p>display: none</p>
+                </div>
+                <div class="item item-1">
+                    <p>visibility: hidden</p>
+                </div>
+                <div class="item item-2">
+                    <div class="items-container">
+                        <div class="item item-0">
+                            <p>parent display: none</p>
+                        </div>
+                        <div class="item item-0">
+                            <p>parent display: none</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="item item-3">
+                    <div class="items-container">
+                        <div class="item item-1">
+                            <p>parent visibility: hidden</p>
+                        </div>
+                        <div class="item item-1">
+                            <p>parent visibility: hidden</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </body>
 </html>