Bug Tracker

#1796 closed bug (fixed)

Opened October 11, 2007 09:49PM UTC

Closed December 11, 2007 04:45AM UTC

.height() and .width() can be wrong if element has padding on all sides and is constrained by containing block

Reported by: dcrosta Owned by: brandon
Priority: major Milestone: 1.2.2
Component: core Version: 1.2.1
Keywords: Cc: dcrosta@gmail.com
Blocked by: Blocking:
Description

In this example:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style>
.box {
    padding: 30px 15px;
    border:1px solid black;
}

.constraint {
    width:250px;
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        alert( $('.box').height() );
    });
</script>
</head>

<body>
    <div class="constraint">
    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Nulla ornare. Ut mattis porttitor felis. Fusce vitae magna vitae odio euismod
    lacinia. In non mi sed sem bibendum consectetuer.</div>
    </div>
</body>
</html>

Javascript alerts that the height is 100 pixels (in FF2/Win). However, firebug & visual inspection show the height is 120px. The cause is that the width of the div whose height we are checking is constrained by the containing block -- so when the .height() method removes the border & padding to check the size of the box, it gets re-layed-out by the browser.

I've attached a patch which removes only the side padding & border when checking height, and only the top/bottom padding & border when checking width. This resolves the issue for this test case.

Attachments (2)
  • 1796.diff (0.5 KB) - added by davidserduke November 29, 2007 05:53PM UTC.

    new patch

  • jquery.patch (0.6 KB) - added by dcrosta October 11, 2007 09:51PM UTC.
Change History (3)

Changed November 29, 2007 05:57PM UTC by davidserduke comment:1

need: Review → Patch

I went ahead and put together a slightly different patch since SVN has different code currently than the one dcrosta started with, but the idea is still identical.

Changed December 06, 2007 08:03PM UTC by joern comment:2

owner: → brandon

Brandon should take a look at it. Maybe he can add a test to the new dimensions testsuite.

Changed December 11, 2007 04:45AM UTC by brandon comment:3

resolution: → fixed
status: new → closed

Fixed in Rev [4100].