L84 L84 - 6 months ago 11
jQuery Question

Equal Height Columns Using JS - Not working on Mobile Devices

I am using JS to calculate height on three columns that contain text and images of various size.

Here is the JS I am using:

maxHeight = 0;
$('.equalheight').each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('.equalheight').css({ height: maxHeight + 'px' });


This works on the desktop in multiple browsers, however, it doesn't work on certain mobile devices. It works on my iPad Mini (latest iOS) but doesn't work on another's iPad 3 or iPhone. It also doesn't work on my Samsung Galaxy S4 using stock browser.

How do I solve this issue?

Here is the site in question.

Answer

Here is a fiddle with @Huangism's suggestion of inline-block. You can adjust the column heights to experiment. http://jsfiddle.net/6WZrM/4/

IF the container div has a fixed height, the columns will fill to that height. I'm setting that with js instead of the column heights directly. Perhaps this approach will work on your problem devices. Also worth considering is that you don't have var before your maxHeight, i suppose its possible that some devices treat its scope differently than others?

//css
#column1, #column2{
  width: 50%;
  display: inline-block;
  height: 100%;
}

//js
var maxHeight = 0;
$('.equalheight').each(function() {
  maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('#container').css({ height: maxHeight + 'px' });  
Comments