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)
Change History (17)
Changed February 13, 2009 05:18PM UTC by comment:1
Changed February 14, 2009 04:15AM UTC by 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 comment:3
| summary: | jQuery.width returns innerWidth but sets outerWidth? → jQuery width inconsistency with buttons |
|---|
Changed August 09, 2009 01:09AM UTC by comment:4
| component: | unfilled → core |
|---|---|
| priority: | major → minor |
Changed November 18, 2010 03:53AM UTC by comment:5
| milestone: | 1.3.2 |
|---|---|
| status: | new → open |
Changed February 20, 2011 07:10AM UTC by 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:
Changed February 21, 2011 04:44AM UTC by 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.102 → 1298266194112048 |
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 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 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 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/files → 1298836194878971 |
| _comment3: | Landed a fix for this: https://github.com/jquery/jquery/pull/253/files → 1302799859681175 |
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 comment:11
| milestone: | → 1.6 |
|---|---|
| priority: | minor → low |
If this patch is good it would be good to land in 1.6.
Changed April 14, 2011 07:49PM UTC by comment:12
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Fix formatting of pull 325. Fixes #4146.
Changeset: 84712bd624a9a4eeaab9ea9c543bba494f2cc3e1
Changed April 15, 2011 01:51PM UTC by 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.
Changed April 16, 2011 05:26PM UTC by comment:14
| component: | core → dimensions |
|---|---|
| resolution: | fixed |
| status: | closed → reopened |
| version: | 1.3.1 → 1.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 comment:15
| status: | reopened → open |
|---|
Changed April 17, 2011 08:22PM UTC by comment:16
| milestone: | 1.6 → 1.next |
|---|---|
| priority: | low → high |
Changed April 21, 2011 03:32AM UTC by comment:17
| resolution: | → invalid |
|---|---|
| status: | open → closed |
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.
Faulty behaviour seen in Firefox 3.0.6 and IE 6.0