fix for display: inline-flex, closes #68

liabru · May 14, 2015 · e769b9f · e769b9f
1 parent d8cc365
commit e769b9f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -169,7 +169,12 @@
  // must first force an arbitrary equal height so floating elements break evenly
  $elements.each(function() {
  var $that = $(this),
- display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+ display = $that.css('display');
+
+ // temporarily force a usable display value
+ if (display !== 'inline-block' && display !== 'inline-flex') {
+ display = 'block';
+ }
 
  // cache the original inline style
  $that.data('style-cache', $that.attr('style'));
@@ -210,7 +215,12 @@
  // iterate the row and find the max height
  $row.each(function(){
  var $that = $(this),
- display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+ display = $that.css('display');
+
+ // temporarily force a usable display value
+ if (display !== 'inline-block' && display !== 'inline-flex') {
+ display = 'block';
+ }
 
  // ensure we get the correct actual height (and not a previously set height value)
  var css = { 'display': display };

diff --git a/test.css b/test.css
@@ -277,4 +277,16 @@ a, a:link, a:visited, a:active, a:hover {
  vertical-align: top;
  /*width: 20%;*/
  float: none;
+}
+
+/* test inline-flex */
+
+.inline-flex-items {
+ text-align: center;
+}
+
+.inline-flex-items .item {
+ display: inline-flex;
+ vertical-align: top;
+ float: none;
 }
diff --git a/test.html b/test.html
@@ -289,6 +289,33 @@ <h3>Target</h3>
  </div>
  </div>
 
+ <div class="items-container inline-flex-items">
+ <div class="item item-0">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-1">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-2">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-3">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-4">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-5">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-6">
+ <p>display: inline-flex</p>
+ </div>
+ <div class="item item-7">
+ <p>display: inline-flex</p>
+ </div>
+ </div>
+
  <div class="items-container hidden-items">
  <div class="item item-0">
  <p>display: none</p>