How to bind the heights of multiple divs

Here we are again, you are a UI/UX developer, trying to change the world by showing it the beauty of CSS3 and pleading "please stop wars and end famine, so we can all appreciate beauty ..."

Not Pictured: Wars and Famine

So, you've gotten that UI right, especially the grid. The grid was a breeze. Bootstrap grid makes life easy. But then, the Angular Guy finishes binding server data, and the grid comes back looking uneven because some text are much longer than others, resulting in some grid elements feeling inferior to others.

Just look at those Happy Even Numbers

If there was a read more functionality, it'd be easy. Truncate the text at some point, and slap a hyperlink to redirect to some page. But what if there isn't?

So you whip out that light saber, all knowledge of CSS you have accumulated over the years, and it's a really long and experienced not-so-light saber. And after all the heights and max-heights, you still can't figure out what to do to bind the heights of multiple div elements to their maximum height.

If you check this JS Fiddle, you'd see a JavaScript function that addresses this issue. It uses the bind-height attribute on the HTML Elements you wish to bind, and binds elements with common bind-height attribute values. That means your grid elements could be <div class='col-sm-4' bind-height='grid-element'></div>, and all elements with [bind-height='grid-element'] will have their heights bound to the height of the "tallest" element.

Also, feel free to update the attribute value dynamically using ng-repeat, or from your server-side environment.

So, with less worrying, you now have more time to sip your tea, file those nails, and do whatever UI/UX people do once their CSS is beautiful.
PS: I assume it involves a mirror and some wax (don't ask)


Follow @mykeels on twitter and instagram

Show Comments