CODEWITHSUNDEEP
jquery
Dirty Bird Design
Dirty Bird Design

Reputation: 5553

Make equal heights function update

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'));
             });

Upvotes: 0

Views: 193

Answers (1)

Brian Cray
Brian Cray

Reputation: 1275

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

Upvotes: 2

Related Questions