fix issue maintaining inline styles, closes #95

liabru · Dec 25, 2015 · 878ff96 · 878ff96
1 parent 61a9ed4
commit 878ff96
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -232,6 +232,7 @@
  // iterate the row and find the max height
  $row.each(function(){
  var $that = $(this),
+ style = $that.attr('style'),
  display = $that.css('display');
 
  // temporarily force a usable display value
@@ -249,8 +250,12 @@
  targetHeight = $that.outerHeight(false);
  }
 
- // revert display block
- $that.css('display', '');
+ // revert styles
+ if (style) {
+ $that.attr('style', style);
+ } else {
+ $that.css('display', '');
+ }
  });
  } else {
  // if target set, use the height of the target element

diff --git a/test/page/test.html b/test/page/test.html
@@ -394,6 +394,26 @@ <h3>min-height</h3>
  <p>Aenean semper.</p>
  </div>
  </div>
+
+ <div class="items-container inline-style-items">
+ <div class="item item-0" style="display: inline-block">
+ <h2>min-height</h2>
+ <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
+ <p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
+ </div>
+ <div class="item item-1" style="position: relative">
+ <h3>min-height</h3>
+ <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
+ </div>
+ <div class="item item-2" style="min-height: 10px">
+ <h4>min-height</h4>
+ <p>Aenean semper felis ipsum, vulputate consequat dui elementum vel. Nullam odio eros, sagittis vitae lectus id, pretium viverra lectus. Etiam auctor dolor non dui ultricies pulvinar.</p>
+ </div>
+ <div class="item item-3" style="padding: 15px">
+ <h3>min-height</h3>
+ <p>Aenean semper.</p>
+ </div>
+ </div>
  </div>
  <div id='results'></div>
  </body>

diff --git a/test/specs/matchHeight.spec.js b/test/specs/matchHeight.spec.js
@@ -107,7 +107,7 @@ describe('matchHeight', function() {
  expect(1.0001).not.toBeWithinTolerance(0);
 
  $('.simple-items, .image-items, .nested-items-parent, .nested-items,' +
- '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float')
+ '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float, .inline-style-items')
  .each(function() {
  var $items = $(this).children('.item'),
  rows = $.fn.matchHeight._rows($items);
@@ -148,7 +148,7 @@ describe('matchHeight', function() {
  $.fn.matchHeight._update();
 
  $('.simple-items, .image-items,' +
- '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float')
+ '.fixed-items, .inline-block-items, .inline-flex-items, .items-with-float, .inline-style-items')
  .each(function() {
  var $items = $(this).children('.item'),
  targetHeight = $items.first().outerHeight(),
@@ -392,6 +392,21 @@ describe('matchHeight', function() {
 
  done();
  });
+
+ it('maintains inline styles', function(done) {
+ var $items = $('.inline-style-items'),
+ item0Value = $items.find('.item-0')[0].style.display,
+ item1Value = $items.find('.item-1')[0].style.position,
+ item2Value = $items.find('.item-2')[0].style.minHeight,
+ item3Value = $items.find('.item-3')[0].style.padding;
+
+ expect(item0Value).toBe('inline-block');
+ expect(item1Value).toBe('relative');
+ expect(item2Value).toBe('10px');
+ expect(item3Value).toBe('15px');
+
+ done();
+ });
 });