Skip to main content

Bug Tracker

Side navigation

#4146 closed bug (invalid)

Opened February 13, 2009 05:16PM UTC

Closed April 21, 2011 03:32AM UTC

Last modified March 09, 2012 11:43AM UTC

jQuery width inconsistency with buttons

Reported by: rob.desbois Owned by:
Priority: high Milestone: 1.next
Component: dimensions Version: 1.5.2
Keywords: Cc:
Blocked by: Blocking:
Description

If you have a button-type element on the page then the following code makes it shrink when it seems it should have no effect

var w = $("#x").width(); 222

$("#x").width(w); makes element shrink

$("#x").width(); // 216

This occurs for input[type=button], input[type=submit], input[type=reset] and button elements too.

Attachments (2)
  • test-4146.html (0.6 KB) - added by dmethvin February 14, 2009 04:03AM UTC.

    bizarro buttons width

  • test-jquery-fault.html (0.7 KB) - added by rob.desbois February 13, 2009 05:16PM UTC.

    Testcase showing shrinking button

Change History (17)

Changed February 13, 2009 05:18PM UTC by rob.desbois comment:1

Faulty behaviour seen in Firefox 3.0.6 and IE 6.0

Changed February 14, 2009 04:15AM UTC by dmethvin comment:2

In test-4146 I set up a case with two buttons, both with simple 80px width, 5px border, and 10px padding. You'd expect jQuery to return 80 for width but instead it returns 80-10-10-5-5=50. If you ask jQuery for

$("#x1").css("width")
it correctly returns 80px. I *think* that means the browsers I tested (FF3 and IE8RC1) include the border and padding in the css width.

Changed February 14, 2009 04:15AM UTC by dmethvin comment:3

summary: jQuery.width returns innerWidth but sets outerWidth?jQuery width inconsistency with buttons

Changed August 09, 2009 01:09AM UTC by dmethvin comment:4

component: unfilledcore
priority: majorminor

Changed November 18, 2010 03:53AM UTC by dmethvin comment:5

milestone: 1.3.2
status: newopen

Changed February 20, 2011 07:10AM UTC by jboesch comment:6

Looks like the browsers are adding padding-left, padding-right as defaults. Then in jQuery, we run it through an $.each loop on line 295 in css.js. It's doing a val -= on the padding... thus taking away padding we didn't explicitly set:

http://jsfiddle.net/jboesch26/Gtm5H/

Changed February 21, 2011 04:44AM UTC by jboesch comment:7

_comment0: Here are some more findings... offsetWidth is not taking padding/borders into consideration for button and input with type submit, reset, button. \ http://jsfiddle.net/jboesch26/Gtm5H/7/1298265670469789
_comment1: Here are some more findings... offsetWidth is not taking padding/borders into consideration for quite a few different input types/buttons: http://jsfiddle.net/jboesch26/Gtm5H/1298266168555719
_comment2: Here are some more findings... offsetWidth is not taking padding/borders into consideration for quite a few different input types/buttons: http://jsfiddle.net/jboesch26/Gtm5H/ \ \ It's a bummer that these results are different in Firefox 3.6 and in Chrome 9.0.597.1021298266194112048

Here are some more findings... offsetWidth is not taking padding/borders into consideration for quite a few different input types/buttons: http://jsfiddle.net/jboesch26/Gtm5H/

Try running that jsfiddle in some different browsers...

It's a bummer that these results are different in Firefox 3.6 and in Chrome 9.0.597.102

Changed February 21, 2011 07:11AM UTC by jboesch comment:8

_comment0: This seems like a big browser bug. Having offsetWidth work in some browsers for some elements and not for others is very weird. I'm not sure how to go about fixing this. This problem exists when you call outerWidth() on input/button elements too. See my fiddle for examples.1298275282386321
_comment1: This seems like a big browser bug. Having offsetWidth work in some browsers for some elements and not for others is very weird. This problem exists when you call outerWidth() on input/button elements too. See my fiddle for examples.1298275294515397

This seems like a browser bug. Having offsetWidth work in some browsers for some elements and not for others is very weird. This problem exists when you call outerWidth() on input/button elements too. See my fiddle for examples.

Changed February 21, 2011 04:45PM UTC by jboesch comment:9

Prototype has this problem as well: http://jsfiddle.net/jboesch26/xW2zW/

I think the only way around this issue is scrapping offsetWidth/offsetHeight.

Dojo does not have this problem: http://jsfiddle.net/jboesch26/CAUS3/

Dojo is only using offsetWidth/Height when the value of the element is "auto".

I will look into landing a patch.

Changed February 26, 2011 09:21PM UTC by jboesch comment:10

_comment0: Landed a patch for this: https://github.com/jquery/jquery/pull/251/files \ Even though it merged my branch with another issue i submitted.. hmm. Might need to fix that...1298836170146230
_comment1: Landed a patch for this: https://github.com/jquery/jquery/pull/253/files \ Even though it merged my branch with another issue i submitted.. hmm. Might need to fix that...1298836179068834
_comment2: Landed a patch for this: https://github.com/jquery/jquery/pull/253/files1298836194878971
_comment3: Landed a fix for this: https://github.com/jquery/jquery/pull/253/files1302799859681175

Landed a fix for this: https://github.com/jquery/jquery/pull/325/files

UPDATED: new pull request

Changed March 25, 2011 06:00PM UTC by dmethvin comment:11

milestone: → 1.6
priority: minorlow

If this patch is good it would be good to land in 1.6.

Changed April 14, 2011 07:49PM UTC by jeresig comment:12

resolution: → fixed
status: openclosed

Fix formatting of pull 325. Fixes #4146.

Changeset: 84712bd624a9a4eeaab9ea9c543bba494f2cc3e1

Changed April 15, 2011 01:51PM UTC by jboesch comment:13

Should be set to invalid. Setting border-sizing: content-box in the CSS fixes it in FF. By default FF uses border-sizing: border-box for buttons.

http://jsfiddle.net/jboesch26/3qDqV/

Changed April 16, 2011 05:26PM UTC by timmywil comment:14

component: coredimensions
resolution: fixed
status: closedreopened
version: 1.3.11.5.2

There is still a problem in IE8 returning inconsistent width values for inputs and buttons. The inconsistency is present with both border-box or content-box. http://jsfiddle.net/timmywil/AFRt7/4/

Changed April 16, 2011 05:26PM UTC by timmywil comment:15

status: reopenedopen

Changed April 17, 2011 08:22PM UTC by john comment:16

milestone: 1.61.next
priority: lowhigh

Changed April 21, 2011 03:32AM UTC by timmywil comment:17

resolution: → invalid
status: openclosed

I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to

some value might make the button smaller is due to the box-sizing.