Opened 15 years ago
Closed 15 years ago
#1796 closed bug (fixed)
.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: | [email protected]… | |
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)
Change History (5)
Changed 15 years ago by
Attachment: | jquery.patch added |
---|
Changed 15 years ago by
comment:1 Changed 15 years ago by
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.
comment:2 Changed 15 years ago by
Owner: | set to brandon |
---|
Brandon should take a look at it. Maybe he can add a test to the new dimensions testsuite.
new patch