Skip to main content

Bug Tracker

Side navigation

#6982 closed bug (fixed)

Opened September 01, 2010 07:52PM UTC

Closed September 23, 2010 05:45AM UTC

Last modified September 23, 2010 05:46AM UTC

.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:
Description

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 (0.8 KB) - added by davidflanagan September 01, 2010 07:52PM UTC.

    test case

Change History (4)

Changed September 02, 2010 10:28PM UTC by davidflanagan comment:1

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.

Changed September 03, 2010 12:54AM UTC by dmethvin comment:2

See also #5520.

Changed September 23, 2010 05:45AM UTC by snover comment:3

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.

Changed September 23, 2010 05:46AM UTC by snover comment:4

Whoops. .width and .height documentation.