Side navigation
#13384 closed bug (notabug)
Opened February 04, 2013 01:43PM UTC
Closed February 04, 2013 03:01PM UTC
Last modified February 24, 2013 10:55PM UTC
$().height() or $().width() sets wrong value on elements with "box-sizing: border-box"
| Reported by: | t.nowakowski@o2.pl | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.9.0 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
When i use $().height() or $().width() on element with "box-sizing: border-box" the new value is increased by the padding and border.
Let's say we have element foo:
#foo {
border: 1px solid red;
padding: 4px 0;
box-sizing: border-box;
}
If i run this code:
$("#foo").height(10)
element height would be set to 20px (10+4+4+1+1).
working example here:
This bug is also present in 1.8.x version. In earlier release it works fine.
Tested in latest firefox, chrome, opera editions and IE9.
Attachments (0)
Change History (4)
Changed February 04, 2013 03:01PM UTC by comment:1
| resolution: | → notabug |
|---|---|
| status: | new → closed |
Changed February 24, 2013 10:34PM UTC by comment:2
The documentation says otherwise:
Note that .height(value) sets the height of the box in accordance with the CSS box-sizing property. Changing this property to border-box will cause this function to change the outerHeight of the box instead of the content height.
Source: http://api.jquery.com/height/
Changed February 24, 2013 10:44PM UTC by comment:3
jhogervorst, thanks for noticing that! The documentation is wrong. Fixing now.
Changed February 24, 2013 10:55PM UTC by comment:4
Documentation has been updated and will go live shortly.
To maintain sanity, the
.height()is always the content height. It doesn't change based on CSS properties kept in some distant file. The other height methods like.innerHeight()are setters so you can choose which height you mean in your code without ambiguity.