CODEWITHSUNDEEP
javascripthtml
PositiveGuy
PositiveGuy

Reputation: 47733

Clickable label not working in IE 8

I've got the following list item:

<li>
    <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
        id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
    <label for="ctl00_mainContent_someRadioButton">
        <img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" />
    </label>
</li>

So what shows up is a radio button and an image next to it. When I am in FireFox, Chrome, and Safari clicking on that image fires the showSomeInfo() that's specified in the radio's onclick. I'm not sure why I guess because it's wrapped in a label and that label is relating to that radio button....

But anyway that's not my problem. I like that when you click the image, that javascript method showSomeInfo() is called. But the problem is that it works in all browsers except IE 8. If I open this page in IE 8, clicking on the image does nothing and I'm not sure why. I'm baffled at this one.

Upvotes: 26

Views: 23982

Answers (9)

Alan King
Alan King

Reputation: 15

This works for me with a group of radio inputs followed by labels containing an image. Basically used it instead of using for attribute in all browsers 

      inputs.each(function() {

         $(this).click(function (e) {
             // do stuff ...
         });

        // adding click handler to label containing image 
        $(this).next().on('click', function(event) {
            // prevent 'for' attribute firing
            event.preventDefault();
            // check and trigger click on input
            $(this).prev().prop("checked", true).trigger('click');
        });
     });

Upvotes: 0

Christopher
Christopher

Reputation: 1851

I tried some of the other solutions posted here and eventually amended them to get a working fix to your problem. My problem was similar, though the HTML looked a little different, with the LABEL tag wrapping both the image and the INPUT radio button.

The solution I include below will ensure that any onClick handlers fire correctly on the radio button itself. It also does this only once and not in browsers where the radio button label behaves normally.

This is the jQuery code I used to solve the problem in Internet Explorer 11:

$('LABEL > IMG').click(function () {
    var inputId = $(this).parents('LABEL:first').attr("for");
    if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click();
});

The code above uses the jQuery method attr() to manipulate the checked property. If you're using jQuery 1.6 or higher you should modify this to use the jQuery method prop() instead.

Upvotes: 0

Adam Hughes
Adam Hughes

Reputation: 2277

I've also discovered that if you have a hidden input with display:none or visibility:hidden and are relying on the label for selection it will not work in ie8.

My workaround was to have an overflow:hidden on the containing element and position the input outside of this area.

Upvotes: 7

Daniel
Daniel

Reputation: 2998

I Guess I have a better hack solution for this problem. I will explain why for first.

Using jquery to hit the label click works, but not when you are using an Input File, because you will receive access denied.

Using css and display the image as a background it´s not good too because you need to have an image with the exactly size, which is not the case when the user uploads the Image or you have a lot of images with different sizes.

Ok now I´ll explain the idea of the hack:

You have a Label with an image inside, when you click the image, IE8 doesn´t fire the Label. But if you write some text into the Label, when you click the text IE8 fire the label.

The Idea is to put a span inside the label, with the size of the label (width and height)

Ok but if you don´t have text inside it won´t work, but if you change the background color it will work.

So what you need to do is:

  1. Place a Span with the role size of the Label
  2. Write a background color and make it transparent
  3. Position the Span using relative position to put the Span exactly over the Label.

It´s a little hard to do it, but I guess it will cover many more situations. An example of a Label firing the Input type File:

<label for="" id="lblInput" style="cursor: pointer; z-index:3;">
    <img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" />
    <span style="position:relative;
        top:-180px;display:block;height:180px;width:280px;
        z-index:1;background-color:Aqua;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
        background: rgba(255, 255, 255, 0.0);" >
    </span>
</label>

I hope it works and save you Like it saved-me

Upvotes: 3

Wolfgang
Wolfgang

Reputation: 60

Are you sure you aren't simply looking at a typo? Check "ctl00_mainContent_someRadioButton" vs. "ctl00_mainContent_somelRadioButton"

Upvotes: 1

Brad
Brad

Reputation: 1007

There's a slightly cleaner approach to change the markup that doesn't involve (ugly) CSS hacks or Javascript; change the <img> tag to a <span> tag with a background-image of the appropriate size. For example:

<li>
  <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
         id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
  <label for="ctl00_mainContent_someRadioButton">
    <span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" />
  </label>
</li>

Replacing the width and height of your image appropriately.

Upvotes: 14

Rod
Rod

Reputation: 2066

I was looking for an answer to this and wrote a quick dirty jquery handler for it:

$("label").click(function(){
    if ($(this).attr("for") != "")
        $("#" + $(this).attr("for")).click();
});

Upvotes: 17

Elias Zamaria
Elias Zamaria

Reputation: 101053

It looks like IE doesn't properly handle labels with img elements in them. The only reasonable ways I have been able to find for dealing with this problem are either using HTML component behaviors, Javascript handlers, or CSS hacks. I haven't tried all of these so I can't guarantee that they will work.

Upvotes: 0

Pointy
Pointy

Reputation: 413702

The reason it works the way it does in Firefox et al is that that's what <label> is supposed to do when it's got a "for" attribute that points to an input field (by "id" value). If it doesn't work that way in IE, it's because Microsoft either interpreted the standard differently or simply failed to implement it correctly. (I don't see any clear language in the w3c reference I found to stipulate whether anything but text content of a label should get focus and transfer it.)

Upvotes: 7

Related Questions