jQuery 1.8 outer Height/Width not working

Question

I have used outerHeight and outerWidth on many places. Now, after jQuery 1.8 was released I have met a lot of issues caused by object return instead of its size.

For example:

$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div

The only thing that I have found to fix this was to use "true/false" in the function as follows but the I get the same results as the standard width() and height() functions:

$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px

Has anyone knew why this is not working any more or other way to get the height/width of element + its margins.

EDIT: I started to believe that this is caused because I am selecting elements in iframe using contents() function. I will try to make a demo.

Insalubrious

Does your element have a margin? If not it's correct, that both values are the same. – Reinhart

Your question tells us nothing about what value is expected. Please include your HTML & CSS. Also set up a demo to show how jQuery 1.8 is working improperly as compared to previous versions. – Indiscreet

There is no way to show my code. It is composed from many js/css/classic asp files. I will try to make an exmaple with iframe and hope this happens again. – Insalubrious

This seems to be a very localised issue to your code as jQuery's 1.8 height/width methods are behaving as expected. If anything, the 1.8 release added new features to those methods and addressed/fixed several issues. See some tickes on fixes for 1.8: bugs.jquery.com/ticket/10877 , bugs.jquery.com/ticket/10413 , bugs.jquery.com/ticket/6724 , bugs.jquery.com/ticket/11724 – Buff

This issue is beacuse a old version of jquery-ui – Travancore

@ Andrés Ricardo Torres Martínez So, if I update my jquery-ui version it should be fixed? – Insalubrious

I'm seeing the same behavior, as in outerwidth / height broken and returning an element, not the numbers. this question should not be closed. good job moderators. – Acromegaly

new question: #12718584 – Acromegaly

This should not be closed – Tarsal

Answer 1

This is actually a known jQuery bug that you can read about here.

I'm experiencing it with no parameter and the fix is setting the parameter (even though there's a default {false}), but I was able to break Barlas' fiddle by replacing the true parameter with 1 and false with 0. So don't do that if you are.

Do this:

alert(jQuery(this).outerHeight(false));

Don't do this:

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));

Immensity

I had this problem with JQuery Tools Tooltip plugin when upgrading JQuery from 1.7.2 to 1.9.1. After changing outerWidth() to outerWidth(false) and outerHeight() to outerHeight(true) it works fine. – Coparcenary

I've encountered this issue when the jquery-tokeninput started rendering the dropdown in the wrong place. I traced it back to an outerHeight method and was able to resolve it by passing false. I also tried removing jquery-ui-1.8.20 and that also fixed the issue - I will now upgrade jquery-ui and see if it is the interaction between it and newer versions of JQuery. In my case the jquery-tokeninput broke after upgrading to JQuery 1.8 and above. – Anthonyanthophore

Answer 2

It only works if I do .outerHeight(1); not .outerHeight(true);

Lynnelle

Answer 3

JQuery 1.8 height(), innerHeight(), outerHeight() and outerHeight(true) work as expected:

DEMO - Working height methods

The demo above is using a div:

<div id="myDiv">My Div</div>

With the following CSS:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

Using this script:

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

Resulting in the following:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52

Buff

Answer 4

The best fix is to pass the Boolean parameter true or false when calling outerHeight or outerWidth

But..

If by any chance you don't have access to files which calls outerHeight or you don't want to edit all outerHeight functions in your files, you can override the jQuery outerHeight function like below to make it always pass the true parameter

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};

Weatherworn

Answer 5

It is working fine mate, i can't be sure without seeing your html and css but you can inspect this example and examine it is working fine on jQuery 1.8.0

Here is working jsFiddle.

jQuery:

console.log($('#stackoverflowdiv').outerHeight(false));//returns 110
console.log($('#stackoverflowdiv').outerHeight(true));//returns 130

css:

#stackoverflowdiv { 
      height:100px; 
      margin:10px 5px; 
      padding:5px; 
      border 2px solid #fff;
}​

Are you sure that you forgot use a semicolon or define document.ready ? Or worse forgot to define margin or border ?

Microcircuit

Answer 6

outerHeight only returns an integer or null according to the jQuery DOCs.

Returns the height of the element, including top and bottom padding, border, and optionally margin, in pixels. If called on an empty set of elements, returns undefined (null before jQuery 3.0).

There must be something else in your code futzing with your output and making you see the div element.

Sluggard

I suppose this could be result because I am selecting element in iFrame using contents() function. I will make a test with this. – Insalubrious