jQuery Check if Element has auto width/height

A user at Stack Overflow had a question: how can you tell if an element has the height attribute set to ‘auto’? It’s relatively well known that most of the methods for getting a height will return the calculated height in the browser’s preferred unit of measurement (all are using pixels as far as I know). Some methods will not return a value because they are checking the inline attribute to see what the height attribute is… no help since we’re talking about CSS height property.

While I was testing a theory, that question got deleted by its owner. I suspect this is because he was told, “It’s impossible” or “show us what you’ve tried”. But my test worked in a limited not-heavily-tested way. Here it is for your inspection; if you have an alternative, sound off in the comments!

The Theory

What’s unique about having auto height? Well, the fact that it allows height to change dynamically, of course! All we have to do is quickly make a change that should trigger height difference, test if height indeed changed, and return true (height is auto) or false (height is static).

Acceptable trade-offs: you have to know your own site. It’s perfectly possible that the test condition can return a false positive. Know your site and rig the test in such a way that it’s either extremely unlikely-to-impossible that this will happen, or in cases where it may happen that it doesn’t matter.

First Crack: Font-Size

In the first proof of concept, all I did was:

1. Store the current font size and element size
2. Increase the font size
3. Test new element size; if height increases, height must be set to auto.
4. Return font to its original size

Brute-force code:

var theDiv = $('#foo');

var isAutoHeight = function(element) {
    var autoHeight = false;
    var initialHeight = element.height();
    var initialFont = parseInt(element.css('font-size'));
    element.css('font-size', initialFont +10);
    var currentHeight = element.height();
    if (currentHeight > initialHeight) {
        autoHeight = true;
    }
    element.css('font-size', initialFont);
    return autoHeight;
};

// test it
console.log(isAutoHeight(theDiv));

Try at JSFiddle: http://jsfiddle.net/mYQ5T/

There are some problems: it’s possible though unlikely to upsize a font and not have the container expand. There could be visible artifacts of hopping the font size around like that. It’s slow.

Refinement: The Cloned Element

If you position the div absolutely or somewhere off-canvas, and set visibility to “hidden” (not to be confused with “display: none”), you are still able to get its height. Great, right?

What’s even better is doing this with a clone and leave the original alone. Then we solve the font-sizing issue by removing all content from the div, which should reduce an auto-sized div down to zero height (and a div with height set will stay the same).

HTML:

<div>Foobar</div>
<div>Barfoo<div style="height: 200px"></div></div>

CSS

#foo { height: auto; }
#bar { height: 20px; }

Script:

var div1 = $('#foo');
var div2 = $('#bar');

var isAutoHeight = function(element) {
    // make a staging area for all our work.
    $('body').append('<div></div>');
    
    // assume false by default
    var autoHeight = false;
    
    // clone the div and move it; get its height
    var clone = element.clone();
    clone.appendTo('#stage');
    var initialHeight = clone.height();
    
    // destroy all the content and compare height
    clone.html('');
    var currentHeight = clone.height();
    if (currentHeight &lt; initialHeight) {
        autoHeight = true;
    }
    
    // get that clone and its smelly duplicate ID out of the DOM!
    clone.remove();
    // do the same for the stage
    $(&#039;#stage&#039;).remove();

    return autoHeight;
};

// test it
console.log(isAutoHeight(div2));

Conclusion

It’s a bit fragile. You could have an element with “height: auto” set on it and unbeknownst to the author, other styles cause it to be ignored… this will generate a false positive, but then again if the author doesn’t know their “auto” isn’t working, there are probably bigger problems. In any event, it will work in many situations and you should make sure yours is one of them.

And again, would love to hear a different approach, and would HAPPILY eat my shame and embarrassment if this is actually already available to plain JavaScript or even jQuery.