jQuery width inconsistency with buttons

[rob.desbois]

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.

[rob.desbois]

Testcase showing shrinking button

[rob.desbois]

Faulty behaviour seen in Firefox 3.0.6 and IE 6.0

[dmethvin]

bizarro buttons width

[dmethvin]

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.

[dmethvin]

​http://jsfiddle.net/dmethvin/qwVUK/

[jboesch]

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/

[jboesch]

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

[jboesch]

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.

[jboesch]

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.

[jboesch]

Landed a fix for this: ​https://github.com/jquery/jquery/pull/325/files UPDATED: new pull request

[dmethvin]

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

[jeresig]

Fix formatting of pull 325. Fixes #4146.

Changeset: 84712bd624a9a4eeaab9ea9c543bba494f2cc3e1

[jboesch]

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/

[Timmy Willison]

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/

[Timmy Willison]

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.