Equal heights not working for regions?

There is a problem with Equal Heights right now in my opinion. Take zone-postscript for instance.

If you set the zone to "Force equal height for all child elements", then all four regions are displayed at the same height, but they are not all assigned the same calculated height with a style="height: xxxpx;"

Oddly enough two different browsers will get different styles. Check this out:

This HTML output is from the same website viewed with Firefox and Chrome:

Firefox:

<div id="zone-postscript" class="zone zone-postscript clearfix equal-height-container container-12">
  <div id="region-postscript-first" class="grid-3 region region-postscript-first equal-height-element">
  <div id="region-postscript-second" class="grid-3 region region-postscript-second equal-height-element" <strong>style="height:</strong> 197px;">
  <div id="region-postscript-third" class="grid-3 region region-postscript-third equal-height-element" <strong>style="height:</strong> 197px;">

Chrome:

<div id="zone-postscript" class="zone zone-postscript clearfix equal-height-container container-12">
    <div class="grid-3 region region-postscript-first equal-height-element" id="region-postscript-first" <strong>style="height:</strong> 175px; ">
    <div class="grid-3 region region-postscript-second equal-height-element" id="region-postscript-second">
    <div class="grid-3 region region-postscript-third equal-height-element" id="region-postscript-third" <strong>style="height:</strong> 175px; ">

Notice how the Firefox browser does not show a style for "region-postscript-first", while the Chrome browser does not show one for "region-postscript-second".

If you were to look at the "calculated heights of the regions, they will all report the same height and in fact are the same from region to region, even though they do not all have the "style" set.

The problem comes in when you want to place a block into those regions with a background of some sort and want make them the same height as their containers. Normally you would set the blocks height to 100%. But this requires that the "containing" div have a height set.

Since not all the regions have heights set specifically, no matter what you do, you will not get the blocks placed inside those regions to look equal height.

In the example above, Firefox will show the block in "region-postscript-first" to be shorter than the other two. In Chrome, the block in "region-postscript-second" displays shorter.

I don't know why the Omega theme does not just assign a height to every region within a zone set to equal height. I don't know if this used to be the way it worked and changed or I was just lucky. I did not see this issue when I wrote the article you cited.

I have no idea how the HTML output is different from one browser to the next.

This is something that needs to be looked into.

I have the same problem as blackened2012.

I think you will both find that the regions within a zone set to equal height are equal in height. If you add a background color to the region itself, it will illustrate it better for you.

Do not put the background color in a div deep within the region. But it on the region itself (i.e. region-postscript-first). Sometimes you can target the first div within with color and that still works to illustrate (i.e. region-postscript-first-inner).

If you have a background deep inside region and have some background color say, then every container between your div and the region div will need "height:100%) and that is not possible in all cases, as I mentioned above.

There is also an issue with adding any {margin-bottom: xxpx;} to a region in a zone that has equal heights set. If you are targeting the right region with your css and you still see different sizes, try removing the margin-bottom (or margin-top) from the region css.

I don not know why this happens. Probably something to do with js height calculation function.

If there are still issues with the equal heights let us know and we can re-open this. As of now it should work as designed and you'll need to adapt your custom CSS to reflect it. Thanks JSCSJSCS

I'm seeing the issue. First, the specs:
Drupal 7.17 / Omega 7.x.-3.1

I am seeing the same as blackened2012.

My configuration includes:
Content Section > Content Zone > Configuration > "Force equal height for all child elements" [ true ]
Content Section > Content Zone > Regions > "Sidebar First"
Content Section > Content Zone > Regions > "Content"

Snipped HTML output:

<div id="zone-content" class="zone zone-content clearfix equal-height-container container-6">
<div class="grid-1 region region-sidebar-first equal-height-element" id="region-sidebar-first" style="">
<div class="grid-5 region region-content equal-height-element" id="region-content" style="">

Shows that the right div's are being classed for the equalheights plugin.

omega-equalheights.js is loading without error, and runs when called.

I did a little sleuthing. Enabling "Media Queries" disables where equalheights does the heavy lifting. (Likewise if your layout is reporting 'mobile') Disable Media Queries, and I get equal-height divs.

for simplicity, this declaration:

.equal-height-element > div {
  height: 100%;
}

makes this complete.

You may need to be more specific, as this is global, but this is a good starting place.

Is enabling "Media Queries" meant to clobber "Equal Heights"?

@JSCSJSCS : Thanks for your above statements, it really helped me in solving a similar kind of issue.

I rewrote the rewrote some lines in the equal height js to achieve the height.

Problem I faced : The blocks were not of equal height even after enabling the 'equal height option in the zone configuration'. I found that the behaviors was not attached in some cases (not sure why it was not attached though).

But the attached file worked well in my case.

Hope this helps some one in future.