Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 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 11 years ago.
test case

Download all attachments as: .zip

Change History (5)

Changed 11 years ago by davidflanagan

Attachment: boxsizing.html added

test case

comment:1 Changed 11 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 11 years ago by dmethvin

See also #5520.

comment:3 Changed 11 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 11 years ago by snover

Whoops. .width and .height documentation.

Note: See TracTickets for help on using tickets.