jQuery Uniform Radios/Checkboxes beneath in IE - 【StackMirror】|jquery|internet-explorer|uniform

I'm having an issue in IE both 9 and 8 with my jQuery Uniformed radio buttons and checkboxes.

For some reason it seems they are stacked on top of each other or something.

I have no code to show because there's nothing implemented out of the norm, but you can see an example on on my live sandbox here:

http://sandbox.tsdapps.com/account/register

If you look at it in IE, int Newsletter section there two blank radio buttons. One of them is already selected but seems to be underneath the blank one in presentation. The same for the Terms checkbox, if you check it, you can see the underlying element get checked because the tip of the checkmark overlaps and is visible to the top right of the box.

I've searched everywhere to try and solve this on my own and I can't find anything. And the github issues portal has like 100 open issues and seems to be pretty much dead, so here I am.

Any help would be greatly appreciated.

Thanks.

-Vince

2012-04-03 22:25
by Vince Kronlein

Hmmm your Uniform produces one more element in IE than ff/chrome. Do you use the latest version? Because on the official page it produces different HTML than in yours (http://uniformjs.com/ - Marco Johannesen 2012-04-03 22:39

yeah official version and the latest from github - Vince Kronlein 2012-04-03 22:39

Tried taking your style and script file, and used the default Uniform setup:

http://jsfiddle.net/AKfN8/2/

Which works fine in IE...

So it seems to be Modernizer breaking it, this is what happend when i added it:

http://jsfiddle.net/AKfN8/11/

So my guess is that you are using the Modernizr HTML5 input tag extension which might break Uniform. Could you try to remove modernizr to test it? :)

If it is, you might want to make a build without the input extension.

2012-04-03 22:59
by Marco Johannesen

Hmmm. If I select the 1.7.1 version of jQuery, set to onDomReady and update, it produces multiple instances of each radio and checkbox, with or without moderizr in Chrome. I'll try it in IE but I'm not sure what you're seeing that you say is working - Vince Kronlein 2012-04-03 23:15

Thats because you already have jQuery in your script.combined.js - the one i took from your site. So it would rune it twice if included in JsFiddle too - Marco Johannesen 2012-04-03 23:19

Actually it turned out NOT to be Modernizr at all, it was a placeholder replacement plugin script that was causing the conflict. I found a new version and blam ... all betta! Thanks for the help, you pointed me to the general idea anyway - Vince Kronlein 2012-04-04 01:54

Heh, where was the script placed? Just wandering since i included your combined scripts file, and there wasn't any problem with that : - Marco Johannesen 2012-04-04 05:39

The code does not work in IE8 well because IE8 (as well as IE9 as far as I know) does not support :after and :before pseudo css classes. But you could achieve desired behavior by adding a css and js files that will be IE specific and will be loaded only in IE browsers and add some extra code.

First simply hide the checkbox from the user, to avoid the checkbox be on top of the uniform span.

#some_holder_dom_node span>input[type='checkbox'] {
  visibility: hidden;
}

Once the checkbox is hidden we need to handle it's check/uncheck actions manually and trigger events with other element, for instance:

(function(){
  $(document).on('click', '#some_holder_dom_node div.checker>span', function(){
    $(this).find('input:checkbox').trigger('click');
  });
}());

I used simple JS and CSS, but you could use scss or sass to save some typing for css rules as well as CoffeeScript or something to handle JS stuff.

2014-05-12 11:42
by Developer