Use the better supported offsetWidth property to get a fields width

[pfiller]

Fixes #202

[pfiller]

Firefox does not return the correct value for window.getComputedStyle(@form_field).getPropertyValue('width'). Boo. Luckily, it seems like we can use element.offsetWidth and it's supported by all chosen-supported browsers. Yay!

[kenearley]

@pfiller Issue #212 doesn't seem like the right one here. Are you sure you didn't mean #202?

[kenearley]

@pfiller The code looks good. Could you give me an example of how to make the issue happen in master? I'm trying to browser test it really quick.

[pfiller]

You're right - #202 is the one that would be closed.

In master, just view the example page in Chrome and then Firefox. Note the difference in field widths. Sloppy 😦

[kenearley]

[oriordan]

offsetWidth returns 0 if the element is hidden.
Proposing the following patch:

--- chosen.jquery.js.orig   2013-06-05 14:29:10.125064465 +0000
+++ chosen.jquery.js            2013-06-05 14:23:24.868646488 +0000
@@ -318,6 +318,9 @@
       if (this.options.width != null) {
         return this.options.width;
       } else {
+        if (this.form_field.offsetWidth == 0) {
+            return "" + $(this.form_field).width() + "px";
+        }
         return "" + this.form_field.offsetWidth + "px";
       }
     };

[pfiller]

If the field is hidden, the best workaround is to tell Chosen what width to use explicitly:

$("select").chosen({ width: 'some-width' });

[alexandre-machado]

but if the parent element is hidden (in case of jquery.modal() is closed and reopened), the field is not available in offsetWidth. only return width if use $(this.form_field).width()

sorry my english

[ReinoutW]

Pfiller, in that case you cannot specify the width using css.