Skip to content

Commit

Permalink
fixed support for inline-block
Browse files Browse the repository at this point in the history
  • Loading branch information
liabru committed Aug 3, 2014
1 parent 5dafa0c commit b3df801
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 33 deletions.
9 changes: 5 additions & 4 deletions jquery.matchHeight-min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 15 additions & 9 deletions jquery.matchHeight.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down
23 changes: 7 additions & 16 deletions test.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
20 changes: 16 additions & 4 deletions test.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit b3df801

Please sign in to comment.