Browser Compatibility - Responsive programming quick tip

javascript to vertically align buttons to the bottom of variable length content columns

Earlier this week, I was working on a site that needed to have buttons positioned in the same visual row with variable length content above it.  The site was built responsively, and no matter what I did I could not get the buttons to line up.     Surprisingly, the stubborn browser was Firefox, which is the main browser I use in development work. 

  

When I found the fix for the problem,  I checked in other browsers (specifically Chrome and Safari), and lo and behold the buttons were already aligning.  Moral of this story: When you are having an issue with alignment, check other browsers to fully identify if the problem is browser specific or a programming issue.

Here is the code I used to ensure that all browsers displayed the same:

function updateMaxHeight() {
jQuery('.size-me').height('auto') boxes = jQuery('.size-me');
maxHeight = Math.max.apply( Math, boxes.map(function() { return jQuery(this).height(); }).get());
boxes.height(maxHeight);
jQuery('.span12 .size-me').height(maxHeight + 5); }
jQuery( window ).load(updateMaxHeight);
jQuery(window).on("resize", updateMaxHeight);

I hope this helps someone else when they are programming a row of buttons below content that needs to be defined!

 

If you would like more information about this topic and how One Web Company can help you achieve your goals please fill out the form below.