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](http: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>