jQuery: The Write Less, Do More JavaScript Library

Ticket #1796 (closed bug: fixed)

Opened 10 months ago

Last modified 8 months ago

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

Reported by: dcrosta Assigned to: brandon
Type: bug Priority: major
Milestone: 1.2.2 Component: core
Version: 1.2.1 Keywords:
Cc: dcrosta@gmail.com Needs: Patch

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

jquery.patch (0.6 kB) - added by dcrosta 10 months ago.
1796.diff (507 bytes) - added by davidserduke 8 months ago.
new patch

Change History

Changed 10 months ago by dcrosta

Changed 8 months ago by davidserduke

new patch

Changed 8 months ago by davidserduke

  • need changed from Review to 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 8 months ago by joern

  • owner set to brandon

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

Changed 8 months ago by brandon

  • status changed from new to closed
  • resolution set to fixed

Fixed in Rev [4100].

Note: See TracTickets for help on using tickets.