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();
};
}
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;
}
}
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.
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:
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;
}
}
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.