JQuery Height of Hidden TR returning 0...

Question

Hey Guys,

I'm trying to calculate the height of a TR that is set to display:none, however, the jquery height extension method returns 0 everytime. Of course when its visible it returns the correct value. From my understanding and past experience, I don't know why this is happening because shouldn't it return the height even if its hidden? Anyhow, any help would be appreciated!

thanks!

Answer 1

No, elements that are display:none do not take up room in the document space, so have no dimensions.

It's expected then that properties that are calculated from an element's rectangular space (such as offsetWidth or offsetHeight) will return 0.

Reference: CSS1 Formatting model

Edit: getting dimensions of hidden elements is hard. Depending on your situation, this answer may be of some help.

Answer 2

Rotatin is right. What I've done in the past when I've really needed to know what the height of an element is, is to use jquery to get the height, store it in the element's data object and then hide the element after the page is loaded.

This will be unsightly for a page with a lot of elements (it will seem to lag because the whole page will have to load before hiding elements).

But, if you need this technique, it can be accomplished as such:

$('.should_be_hidden').each(function() {
    $(this).data('height',$(this).height()).hide();
});

It's often useful if you need to animate an object.

To obtain the height, when needed... you can just do:

var element_height = $('#some_element').data('height');