1

I defined the height property of an element using CSS. If the computed height is different from the defined height, then $(element).css('height') returns the computed height, not the height that I defined in CSS. I thought that css() returns the height defined in CSS.

Here's a fiddle to show what I mean: http://jsfiddle.net/D9rQR/ I expected css() to return 100px, but it's returning 20px. I'm using Chrome.

How do get the defined height (100px in the fiddle) using JQuery/Javascript?

Edit: In the example, I set a max-height to emulate what happens in browsers that don't support height for selects. I'm using the following to check if the browser computes the height properly:

if($('select').outerHeight()<parseInt($('select').css('height'))){
    // browser doesn't support "height" for "select"s
}

However, this doesn't work because $('select').css('height') always returns the computed height.

Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
  • Actually. `.css()` returns *neither* the specified value nor the computed value, but the *used* value, which in this case is being restricted by `max-height`. – BoltClock Jul 02 '14 at 02:10
  • 1
    Might be helpful: http://stackoverflow.com/a/16779702/283863 – Derek 朕會功夫 Jul 02 '14 at 02:10
  • The only way to do this is very nastily. I'd try to avoid it at all costs. There are solutions in the link @Derek朕會功夫 posted that will work though. – Bill Criswell Jul 02 '14 at 02:20
  • You're right. I looked at the solution in Derek's link and I've decided to manually add `data-height` attributes to each element for now. `data-height` contains the same value as defined in CSS. – Leo Jiang Jul 02 '14 at 02:34

2 Answers2

0

$('select').height() is height of select without padding

$('select').css('height') is actual height (has padding)

$('select').css('height') = $('select').outerHeight();

HDT
  • 2,017
  • 20
  • 32
-1

If you add border:0; and remove max-height you will get the correct height, as height does not get applied on selects unless border is 0, not sure if this also applies to ie.

jayaguilar
  • 182
  • 6