fixed support for inline-block

liabru · Aug 3, 2014 · b3df801 · b3df801
1 parent 5dafa0c
commit b3df801
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 33 deletions.
diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -51,13 +51,18 @@
  if (byRow) {
 
  // must first force an arbitrary equal height so floating elements break evenly
- $elements.css({
- 'display': 'block',
- 'padding-top': '0',
- 'padding-bottom': '0',
- 'border-top-width': '0',
- 'border-bottom-width': '0',
- 'height': '100px'
+ $elements.each(function() {
+ var $that = $(this),
+ display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+
+ $that.css({
+ 'display': display,
+ 'padding-top': '0',
+ 'padding-bottom': '0',
+ 'border-top-width': '0',
+ 'border-bottom-width': '0',
+ 'height': '100px'
+ });
  });
 
  // get the array of rows (based on element top position)
@@ -84,10 +89,11 @@
 
  // iterate the row and find the max height
  $row.each(function(){
- var $that = $(this);
+ var $that = $(this),
+ display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
 
  // ensure we get the correct actual height (and not a previously set height value)
- $that.css({ 'display': 'block', 'height': '' });
+ $that.css({ 'display': display, 'height': '' });
 
  // find the max height (including padding, but not margin)
  if ($that.outerHeight(false) > maxHeight)

diff --git a/test.css b/test.css
@@ -251,24 +251,15 @@ a, a:link, a:visited, a:active, a:hover {
  visibility: hidden;
 }
 
-/* test display */
+/* test inline-block */
 
-.display-items .item-0 {
- display: block;
- height: 50px;
-}
-
-.display-items .item-1 {
- display: inline;
- height: 100px;
+.inline-block-items {
+ text-align: center;
 }
 
-.display-items .item-2 {
+.inline-block-items .item {
  display: inline-block;
- height: 150px;
-}
-
-.display-items .item-3 {
- display: table-cell;
- height: 200px;
+ vertical-align: top;
+ /*width: 20%;*/
+ float: none;
 }
diff --git a/test.html b/test.html
@@ -217,18 +217,30 @@ <h3>data-mh="items-b"</h3>
  </div>
  </div>
 
- <div class="items-container display-items">
+ <div class="items-container inline-block-items">
  <div class="item item-0">
- <p>display: block</p>
+ <p>display: inline-block</p>
  </div>
  <div class="item item-1">
- <p>display: inline</p>
+ <p>display: inline-block</p>
  </div>
  <div class="item item-2">
  <p>display: inline-block</p>
  </div>
  <div class="item item-3">
- <p>display: table-cell</p>
+ <p>display: inline-block</p>
+ </div>
+ <div class="item item-4">
+ <p>display: inline-block</p>
+ </div>
+ <div class="item item-5">
+ <p>display: inline-block</p>
+ </div>
+ <div class="item item-6">
+ <p>display: inline-block</p>
+ </div>
+ <div class="item item-7">
+ <p>display: inline-block</p>
  </div>
  </div>