JQuery width () does not preclude filling elements inside a hidden range

Question

I am trying to get the width of several hidden select elements. Using width () in jQuery objects returns a width, which is the width defined by CSS, but includes padding. As soon as I switch the elements to show, though, calling width () returns the correct value (i.e. Width, which excludes padding / border / margins).

HTML sample:

<span id="test" style="visibility:hidden"> <select id="one"> <option>1</option><option>2</option><option>3</option> </select> </span> 

CSS

  select { width: 80px; padding: 0 0 0 15px; } 

Expected Width: 65, Reported Width: 80

Here JSFiddle demonstrates my problem: http://jsfiddle.net/2RH7C/4/

Is there a workaround besides setting "visibility: hidden" (instead of showing: no) or cloning / moving objects off the screen? I use KnockoutJS data bindings to control the visibility and display of the binding: none (http://knockoutjs.com/documentation/visible-binding.html).

Answer 1

This is similar to a bug in jQuery 1.7 that does not occur in jQuery 1.8:

http://jsfiddle.net/2RH7C/5/

If you don’t have the ability to update jQuery, then I’m afraid it looks like your “compute with external element” or visibility: hidden methods are your options.

Answer 2

This is a border with 1px on each side. With the border: no; the result is 65.

Answer 3

javascript is correct. Using width () already excludes padding. The displayed width will actually be 110px (80 + 15 + 15).