Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#6982 closed bug (fixed)

.width() and .height() query and set different things when box-sizing is border-box

Reported by: davidflanagan Owned by:
Priority: undecided Milestone: 1.4.3
Component: dimensions Version: 1.4.2
Keywords: Cc:
Blocked by: Blocking:


When I have an element with box-sizing:border-box, the width() and height() methods query the dimensions of its content area but set the size of its border and padding. A test case it attached: it sets the width of a <div> that uses a border box and then immediately queries the width and gets a different value.

It seems like this should either be fixed or documented. The current docs say that width() is like css("width") so that kind of documents the current behavior. But that sentence is more about the difference in units suffix and does not explicitly point out that the method may set something different than it queries.

Attachments (1)

boxsizing.html (826 bytes) - added by davidflanagan 9 years ago.
test case

Download all attachments as: .zip

Change History (5)

Changed 9 years ago by davidflanagan

Attachment: boxsizing.html added

test case

comment:1 Changed 9 years ago by davidflanagan

I've thought about this some more and have convinced myself that the only thing to be done here is fix the documentation.

It doens't make sense to change the getter behavior of width() (and height()) to honor box-sizing because there are already innerWidth and outerWidth() methods.

And it isn't possible to change the setter behavior width() to ignore box-sizing:border-box because string arguments with non-pixel units can't have border and padding widths subtracted from them.

So I think we're stuck with the fact that for box-sizing:border-box width() and height() will query and set different things. The only fix is to document it clearly.

comment:2 Changed 9 years ago by dmethvin

See also #5520.

comment:3 Changed 9 years ago by snover

Priority: undecided
Resolution: fixed
Status: newclosed

Treating this as a documentation bug, I’ve updated the [http://api.jquery.com/width/ .width] and [http://api.jquery.com/height/ .height] documentation to reflect the current behaviour of jQuery.

comment:4 Changed 9 years ago by snover

Whoops. .width and .height documentation.

Note: See TracTickets for help on using tickets.