10

Why is the height of my search form 0? It's at least 20px high.

jQuery(function($) { // Document ready
    var s_height = $("#search_form").outerHeight(); // Height of searchform
    alert(s_height) // 0
Michael Currie
  • 13,721
  • 9
  • 42
  • 58
matt
  • 42,713
  • 103
  • 264
  • 397
  • 1
    Does `#search_form` have dynamically loaded content? Is there any height set in CSS? – user113716 Nov 07 '10 at 18:46
  • 2
    Is `"#search_form"` visible at the time that the JS is run? jQuery can't get width/height from a hidden element. – Blair McMillan Nov 07 '10 at 18:47
  • 1
    @Blair - Are you certain? [Here's an example](http://jsbin.com/ucuma4/) using a hidden `
    `. It gives the `.outerHeight()` correctly, at least in Safari.
     – user113716 Nov 07 '10 at 18:50
  • 2
    With the information given I can't say for certain, but there are some times when block-level elements can have heights of 0 even when they have content. For instance, if all the content is inside one child element which is floated. – Tom Smilack Nov 07 '10 at 18:56
  • 1
    Problem might be that he is looking for outer height of a form `#search_form` – Sarfraz Nov 07 '10 at 18:57
  • @user - Do you have any plan to be involved in the discussion about your issue? – user113716 Nov 07 '10 at 19:26
  • Perhaps the form includes images, so the height measurement should be calculated in `$(window).load()` instead. Without his/her input, though, we can only speculate. – Ken Redler Nov 07 '10 at 19:41
  • @user , is it happening on all the browsers or only iE, the mostly probably issiue might be as others mentioned the #search_form is not availabe at that time for some reasons. Just do a view source and search for the id. – kobe Nov 07 '10 at 19:58
  • foundt the problem, thank you. i had the parent element hided at the beginning - it was fading in so fast that i didn't realise it was hided. thank you for your help! – matt Nov 08 '10 at 07:07
  • I'll put my comment as an answer then. – Blair McMillan Nov 08 '10 at 08:57

2 Answers2

13

With jQuery you can only get the height of an element if it is visible. So make sure that it is visible at the time that your JS runs, or use one of the several workarounds if you need it to be hidden at the time.

As you mentioned in your comments, the div was hidden and then fading in.

Community
  • 1
  • 1
Blair McMillan
  • 5,299
  • 2
  • 25
  • 45
1

If search_form contains floats, try overflow:hidden; on it. If it contains images, try $(window).load(function(){ /* code */ }).

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434