Home/ Questions/Q 7598983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:32:48+00:00

I use this function to match heights – but am having an issue when

  • 0

I use this function to match heights – but am having an issue when one column grows in height. I the simplest example the “left column” is an aside, and the “right column” is a form.

<!doctype html>
    <head></head>
    <body>
        <div id="contain">
             <aside class="column">aside stuff</aside>
             <div id="formContain" class="column">
                <div id="msgBox"></div>
                form stuff here
            </div>
        </div>
    </body>
</html>

I’m using an errorLabelContainer-#msgBox to return form validation errors. When there are errors, content is inserted into #msgBox and the height of content of the div#formContain grows – but because the height was already set via the js function the height of div#formContain does not and the content overflows the border of div#msgBox. when I remove the js function the height of div#formContain expands with its contents so I know it’s not a clearing issue.

My question is this, how do I make this function re-calculate height dynamically?

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
                        thisHeight = $(this).height();
                        if(thisHeight > tallest) {
                            tallest = thisHeight;
                        }
                    });
    group.height(tallest);
}

$(function() {
             equalHeight($('.column'));
             });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why not call equalHeight($('.column')); when you inject the error text?

    • 0