Omega Theme: Withering Heights?

Force Equal Height For All Child Elements

The first time I saw the setting in the configuration section of a Zone to 'Force equal height for all child elements.', I thought to myself that this would be a pretty useful selection box. I mean, why wouldn't anyone want all the 'blocks' in a zone to be the same height? It would make the page look professional and polished. So, without hesitation, I checked the box, reloaded the page, and waited with anticipation to see my Heathcliff and Catherine blocks together again with equal heights (shameless play on Wuthering Heights).

Not So Fast!

Nothing changed! What kind of setting doesn't do anything? I was quickly taken back to an episode of Star Trek (original series, of course) in which a computer called the M5 is believed to be able to replace all the humans on the Enterprise, and after a small successful initial test, prompts Kirk's superior to refer to him as "Captain Dunsel". Spock explains that a 'dunsel' is a part that serves no useful purpose. Why have a setting that doesn't do anything?

This screenshot represents two regions within a zone. In this case, it is the 'Preface First' and 'Preface Second' regions of the 'Preface Zone' in the Omega 3.x (beta2) theme. If you wanted a before and after view of the zone with the 'Force equal heights for all child elements' checked, then you got your wish! The images are identical. Nothing appears to change. I can't tell you how many times I checked and unchecked that box, cleared cache, cleared browser cache, tried another browser, everything to get the 'Preface First; region to be the same height as the 'Preface Second'.

Well it turns out they are the same height after all. The 'Drupal Planet News' block is just that, a block, not a region. I placed it into the 'Preface First" region using the Context module. Likewise, 'Tweets about #Drupal' is a block placed in the 'Preface Second' region. Omega makes you change the way you think of placing blocks in regions, mainly because of the added layer called a "Zone". In the setting above, I selected the checkbox to force all the child elements of the 'Zone' to be of equal height. The child elements of a 'Zone' is the 'Region'.

Changing the height of the regions has no effect on the heights of the blocks that are contained in those region. Those heights, by default, are controlled by the amount of content they contain. I have set the 'Drupal Planet News' block to show eight RSS feed items and the block only takes up enough height to display those items.

Region Height Revealed

In this image, I have added a bit of color to the "Preface First' region to see that it is indeed set to the same height as the tallest region in the same zone. If I had added a few more blocks of content to that region, then it might become the tallest in the zone and all the other regions might have dark space beneath them just as this image shows for the first region in the zone.

A little investigative work with Firebug revealed that in fact all the regions are being set to the same height; a height that varies depending on the content placed within. Take a look at this sample HTML for a typical region:

<div class="grid-3 region region-postscript-first equal-height-element" id="region-postscript-first" style="height: 661px;">

I highlighted the section where Omega is adding in-line CSS to set the height to be the same as the tallest region in the zone. You will see similar in-line CSS for all the other regions in the zone, all set to the same height. So Omega is behaving exactly as it is designed. Since I only have one piece of content in the "Preface First' region, what I really want to do is change the height of my content to match that of the region it is in so that all the content is displayed at the same height.

This is the difficult part. The trouble is that the content is not assigned a height by default. The box the content resides in expands and contracts to fill the space required. What I needed to do was tell the 'Drupal Planet News' block and all the blocks in the adjacent regions to expand to the same height as the region in which they reside. (Remember, you would only want to do this if you had a single content block in each region.)

'Height:100%' To The Rescue

The first option I tried to set the height of the single piece of content in the region to the same size as the region was to use CSS to style the block's class selector to 'height:inherit'. Drum role...wait for it...Nothing again. My regard to Captain Dunsel! After another round of cache clearing and browser switching, I looked up 'height:inherit' and found that it allows an element to inherit the style of the parent, and only the parent. If the parent does not have a height set, then the child can't get one either. I need to get the 'Drupal Planet News' block to be the same height as its great-great-grand parent! You would think you could use a universal (*) selector to do this trick, but it really does not work and the universal selector does not play well with most versions of Internet Explorer (of course). So the tedious chore of setting the height for all the blocks ancestors finally did the trick. It did the trick in Firefox, but it did not work in IE 8 or IE 9 in my testing. So I finally tried setting the style to height:100% and it worked in both Firefox and Internet Explorer.

Here is the CSS I used to create my desired effect:

.region-postscript-first .region-inner,
.region-postscript-second .region-inner {
    height: 100%;
}
.region-postscript-first .region-inner .block-aggregator-feed-1,
.region-postscript-second .region-inner .block-block-1 {
    height: 100%;
}
.block-aggregator-feed-1, .block-block-1 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #64A389;
    border-radius: 5px 5px 5px 5px;
}
.region-postscript-second .content,
.region-postscript-first .content {
    padding: 5px;
}

Parting Thoughts

The last thing I did was to better estimate the amount of content in each block to best fill up the new space provided. You will have to play with those on your own, but remember, the region heights are being automatically calculated by Omega and assigned to all the regions in the zone, so no content will be missing or cut off by guessing incorrectly on the amount of content to include. All the regions in the zone will just get taller or shorter as required. Neat huh?

The only other thing I can add is to be careful about what CSS classes you target your styling. Remember, you normally want to style your blocks or its content, not your regions. In the image examples provided, you will see a green border and some rounded corners and padding, etc. If you try to add borders to a region's class, your content will appear to extend past your grids widths and all kinds of terrible things will happen. Kittens may not die, but you might find your last region in a zone has wrapped around and down below the others. Be careful... I'm just saying!

You will see that the same setting to 'Force equal height for all child elements.' is also available for regions as well as zones. If you check that box, you may not see any visible difference in the heights of the blocks in a particular region. Believe me, the "section" heights within the region changed, but your block's height did not. Again, use CSS styles to target the heights of your blocks to match their respective containers. Just as in the example above, we target the blocks to be the same height as the region it was in, in this case, we would target the block (or its content) to be the same height as it's "section" container.

And finally, you do not want to be playing with expanding and collapsing fields in your equal heights areas. The heights are set by JavaScript and unless you know enough JavaScript to re-envoke the calculations every time someone expands and collapse a page element, make sure to stay away from these. Expanding areas will stretch out beyond and over your other page elements. It's not a pretty site!