Demo: How to monkey-patch for IE11

demo
1

If like me you need to support at least IE11 you might be struggling with some functions that are just never going to work for IE.

You’ll have noticed that default inputs need extra styling and that some components don’t behave well. Here’s an example method which you can use in your app constructor/init to patch some functionality. In this case I’m only trying to get IE11 working for inputs and ion-select. The following example adds a .ie-old class to the document body for additional styling and patches the ion-select click event so that it shows. These methods are by no means a good idea, but you might find you need to use them anyway:

private detectOldIE() {

   var isOldIE = navigator.userAgent.match(/Trident/);

if (isOldIE) {
  document.body.classList.add("ie-old");
  this.appManager.isOldIEVersion=true;

  (<any>Select).prototype._click= function (ev) {
    //alert("Monkey patched");
    // monkey patch the _click method for ion-select for IE as UIEvent.detail not supported
    /*if (ev.detail === 0) {
        // do not continue if the click event came from a form submit
        return;
    }*/
    ev.preventDefault();
    ev.stopPropagation();
    this.open();
};
}

}

3 Likes
2

Thanks for the help here, I need to support IE11 but the code for ion-select is new for me. Select applies for ion select? Does one need to have the ion component imported in the class? You wouldn’t happen to have a sample project where this is used?

At the very least this helps with styling ie properly thanks a ton.

answering my own question here is what I did to get it to work…

I added the code above to my app.component.ts

added Select to the ionic-angular import:
import { Platform, MenuController, Nav, Select } from ‘ionic-angular’;

created :
appManager: any = {};

added below to make inputs fully visible
.ie-old {
.item-label-stacked .input-wrapper, .item-label-floating .input-wrapper {
display: inline-block;
}
}

1 Like
3

Interestingly I tried another (non-patched) app in IE11 today using the latest ionic 2 rc 1and it was working surprisingly well. I had to check I wasn’t accidentally running Edge. It didn’t use ion-select and is not currently heavy on forms so I don’t know if thats still an issue.

4

Thanks @webprofusion and @weolopez for sharing! Your code helped me fix a frozen ion-select UX that was impacting our IE 11 web users on Ionic 3.1.1.

By any chance have you figured out a workaround to the ion-datetime component? I created a feature request that was closed out at https://github.com/driftyco/ionic/issues/10277. I don’t have the expertise in IE to clarify the the root issue, so I’m thinking of switching over to https://www.npmjs.com/package/ngx-datetime-picker, which works well on IE 11.

5

Hi, no I actually haven’t used the date control as far as I can remember, it does look like a familiar issue though. If it’s any help here’s my current .ie-old scss:

.ie-old {
    input {
        min-height: 1em;
    }
    .click-block {
        display: none;
    }
    ion-input,
    ion-textarea {
        min-height: 4em;
    }
    ion-label {
        min-height: 1em;
    }
}
6

Here is a way to do it with just CSS, if you are happy with targeting IE11 & IE10. It takes advantage of a media-query technique just to target MS browsers:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10 & 11 */
    .click-block { // IE doesn't like this click-block, so hide it
        display: none;
    }

    // give our form elements some height since IE doesn't support the Ionic code that takes care of this
    input, ion-label {
        min-height: 1em;
    }

    ion-input, ion-textarea {
        min-height: 2em;
    }
}
3 Likes
7

thank you so much for the solution ! worked like magic on my IE 11 ! :smiley: :smiley:
Many Thanks!

8

Hi !

Did you find any workaround for the ion-datetime component to work smoothly on IE11 ??

9

No, the best option seemed to be using a generic Angular ngx datetime component. I haven’t implemented one yet as we had very few IE users on that project.