I have run into a problem that I assume many before me have had. I have an amount of columns within each column there's a panel, in some cases there are 2 adjacent panels. I want all the last panel in each column to fill the bottom empty space out so they have equal height.
The requirement for the project is Edge, IE, Firefox, Chrome and Safari. Unfortunately I have to support back to around IE9-10
I have to do equal height elements in layouts with support for older IE all the time! Here's my approach: http://codepen.io/tomhodgins/pen/pjmKNj
onload = onresize = function(){
var cols = document.querySelectorAll('[data-col]'),
encountered = []
for (i=0;i<cols.length;i++){
var attr = cols[i].getAttribute('data-col')
if (encountered.indexOf(attr) == -1){
encountered.push(attr)
}
}
for (set=0;set<encountered.length;set++){
var col = document.querySelectorAll('[data-col="'+encountered[set]+'"]'),
group = []
for (i=0;i<col.length;i++){
col[i].style.height = 'auto'
group.push(col[i].scrollHeight)
}
for (i=0;i<col.length;i++){
col[i].style.height = Math.max.apply(Math,group)+'px'
}
}
}
Thanks for all the suggestions. I must admit I still haven't found the perfect solution yet. :-(
Right now I have made a hotfix by setting the height to fixed. It's not pretty, but it's the best cross browser solution.
My thoughts are that it's maybe the best solution to make a JavaScript that finds all columns with the same top value, which means they are on the same row. Determine the tallest one and set all with that top value to that height. This has to be done on every resize and might give issues?
You don't need to support old software which is no more supported by vendors with outdated technologies and security issues. There is only IE11 and if user has IE < 11 you should display a warning and provide the links to modern software or how to upgrade.
Of course, you can waste your time on such customers, but in that case you have to ask much, much more or, better, just find another customer. Your developer's time is very expensive and there is no problem for you to find a job, there is a problem for businesses to find someone who will realize their stupid ideas.
I'm afraid what you are trying to do won't be possible with just CSS and Table layout, so you need either flexbox polyfill or any JS plugin to handle that job.
Mario Giambanco
Director of User Experience Development
Simpler Use the IE specific CSS conditional statements and when those browsers are detected, make those columns fixed height.
More involved Use JS and once the page is loaded and rendered, force the heights to be equal. This looks like a good starting point.