Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

IE10 bug when handling percentange widths on select elements #1052

Closed
markweston opened this Issue Feb 21, 2013 · 7 comments

Comments

Projects
None yet
3 participants

I'm having issues with the Prototype version of the plugin (latest
version also tested). It doesn't seem to be correctly converting percentage widths set
on select elements to pixel based widths.

I've attached an image of a side-by-side view of IE10 (on the left) and
Chrome (on the right).

IE10-Chrome-Chosen-Bug

The select elements in question have 100% width applied via CSS and in
Chrome, Chosen applies 539px width to the created drop-down replacement
container.

In IE10, the 100% width is simply translated to 100px. This behaviour is also seen in IE9 and IE8 so I've been applying 100% width to the Chosen element using an !important rule.

It's not great to have to manually style the chosen element using !important, and it's not always a decent or practical solution.

Do you guys have any idea why Chosen isn't converting or simply applying the width correctly?

Thanks.

Collaborator

stof commented Feb 21, 2013

Could you try to run the following code in IE (before applying Chosen on your field) to see what it returns (form_field being your select element) ?

form_field.getStyle("width") ? parseInt(form_field.getStyle("width"), 10) : form_field.getWidth();

Hi,

Sorry about the delay. I ran the code blow and the value '100' returned in all versions of IE and 539 returned in Chrome.

Does this give you anything to go on?

document.observe("dom:loaded", function() {
    var form_field = $('bundle-option-4');
    var form_field_width = form_field.getStyle("width") ? parseInt(form_field.getStyle("width"), 10) : form_field.getWidth();
    console.log(form_field_width);
});
Collaborator

stof commented Mar 4, 2013

Could you check which part of the ternary operator is used to see which part is wrong ? I'm using the jQuery version in my project so I don't face this issue.

Hi Christophe,

I switched the two expressions around and now I'm getting a result of 540 in the various versions of IE and in Chrome.

var form_field_width = form_field.getStyle("width") ? form_field.getWidth() : parseInt(form_field.getStyle("width"), 10);
form_field.getWidth();

returns 540 in the various versions of IE and Chrome

parseInt(form_field.getStyle("width"), 10);

returns 100 in the various versions of IE and 539 in Chrome.

I assume getWidth() is getting a version of the computed pixel width in all browsers and getStyle("width") is returning the CSS applied width in IE but the computed width in Chrome.

Collaborator

stof commented Mar 6, 2013

@pfiller Could you look at this ? I never used Prototype so I cannot really debug this Prototype-specific bug

Thanks for the help @stof.

It looks like there needs to be a check before getStyle("width") is passed through parseInt to see if it returns a percentage or pixel value. If it's a percentage, then maybe the different width selection should be used i.e. getWidth(). Also, what happens with EM values...not sure anyone would necessarily style a form element with ems, mainly text and containers, but still it could have an effect.

Lets see what @pfiller has to say.

Contributor

pfiller commented Apr 17, 2013

Thanks guys. I believe this has been resolved as of c3d906c.

One note: Chosen automatically converts % values into their computed px value (so they are not flexible). If you want chosen to have a flexible size, you'll want to use the custom width behavior.

$("field").chosen({ width: '95%' })

@pfiller pfiller closed this Apr 17, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment