Equal heights, calc(), responsive panels

While most projects have some things in common, it seems that requirements specific to each project mean that I find something new to add to my Drupal toolbox. Here are some of the helpers that made this go 'round a bit smoother.

Responsive equal heights columns with jquery

I needed to have columns be of equal heights. While this can be done with css using display: table & display: table, that was not an option here. I came across jquery-matchHeight.js. It makes the height of all selected elements equal. Here are some of the features:

  • handles images and responsive layouts by automatically updating when needed
  • match the heights of elements anywhere on the page
  • row aware, handles floating elements
  • responsive, automatically updates on window resize (can be throttled for performance)
  • handles mixed padding, margin, border values (even if every element has them different)
  • handles images and other media (updates automatically after loading)
  • handles hidden or none-visible elements (e.g. those inside tab controls)
  • accounts for box-sizing
  • data attributes API
  • can be removed when needed
  • maintain scroll position correctly
  • tested in IE8+, Chrome, Firefox, Chrome Android

It was very easy to use and has a variety of options available. You can see a demo here: jquery.matchHeights Tests.  Visit jquery.matchHeight.js on GitHub

Used calc() for the first time

We needed to have a fixed width div juxtaposed to an adjustable width div. The fixed width div contained an image map so the image could not change sizes, but the page needed to be responsive. This left the right side div the freedom to change. The challenge was that the right side would fit in the area but when adusted would slip down below the left side and continue to adjust. Using calc() solved this problem. I found someone else ran into a similar issue here and Stackoverflow once again provided the answer. This is not supported in ie8 & ie7, but these were not requirements for us and the use case was aimed at mobile. See Can I Use for calc()

I looked up more information about calc() and found some use case examples over at CSS-Tricks. Also, here is an example of using jquery instead. And checkout PolyCalc A JavaScript based CSS3 calc() polyfill.

Responsive Panels & Layout

This project was using Panels and then I found out we were also using the Layout module. This was very beneficial to me as I needed to set up a page that had a completely different layout than the rest of the site as well as responsive action. Here is a video that explains and demonstrates creating the layout. It is Kevin OLeary shoing Spark's vision for a responsive layout. It pretty much works the same (not sure about the grouping option tho).

A couple of other modules in play for the responsive factor were Responsive Panels Layout, Breakpoints and Responsive Preview  from the Spark distribution. All of these powerful modules combined makes for one hella took kit on your site! I had not used Spark yet, but will definitely be spinning up a site to test it soon.

  • Breakpoints - Breakpoints management for responsive web design.
  • Responsive Preview - The Responsive Preview module provides content and theme administrators with a quick way to preview how their site's pages will appear at narrow and wide width dimensions.

All this new-to-me-stuff made for a very interesting project. It takes time to research, read reviews, watch videos, etc. to learn about all this new stuff, but well worth the time. And of course, next time will be much faster. As ever, I have more stuff added to "the list."

Stuff-to-check-out-soon List:

Radix Layouts: Responsive panels layouts for Panopoly and the Radix theme.  https://www.drupal.org/project/radix_layouts

Panels Layout builder based on twitter bootstrap 2 & 3, this will help you to dynamically build panel layouts based on bootstrap grid system. https://www.drupal.org/project/panels_bootstrap_layout_builder




responsive equal heights columns
responsive fix width and variable width divs