I'm having an issue with placeholder text not appearing in IE 11 when utilizing AngularJS. It shows up on every other browser and I haven't modified any CSS to change the appearance of it. I have even disabled all stylesheets and still can't get them to appear. See image below.
If I visit other sites that utilize placeholders within input fields - I have no issues. I'm a bit stumped in terms of resolving the issue. Any ideas?
$(document).ready(function(){
// IE workaround to show placeholder
$(element).placeholder();
})
So it seems I found my issue and also have a solution to follow up. Prior to this I was having compatibility issues with Angular running in specific version of IE and had force compatibility to IE 9 inserting this in the head of my HTML:
<meta http-equiv="X-UA-Compatible" content="IE=9">
I then proceeded to utilize this angular directive https://github.com/cvn/angular-shims-placeholder. It didn't work right off the bat but after scratching my head some more, I realized it may be a caching issue and upon clearing it out, I now have placeholders within my inputs in IE!
Related
In the interest of learning how to use Angular, I thought I'd port a half-finished project of mine over from vanilla JavaScript.
The original is here: http://john.bitsurge.net/bikeracks/
The new version is here: http://john.bitsurge.net/bikeracks-angular
angular-leaflet-directive: http://tombatossals.github.io/angular-leaflet-directive/
The first thing I noticed was that the angularized version was significantly more CPU heavy than the original. To see this, zoom way out and then zoom in again quickly. This is problem still manifests, even after removing all $watchs from the markers. ng-stats claims there are only 18 $watchs left, which is certainly acceptable.
The output from batarang suggests to me like things are actually pretty fast, but that contradicts that actual user experience, which is noticeably different between the two. Maybe these batarang times are per-call but there are just hundreds of calls being made?
Batarang Output
The second thing I noticed, while trying to debug the first, is that the angular version doesn't appear to be using any mobile-friendly styling! The buttons are hopelessly tiny and I can't read the attribution at all.
Any idea what's going on here?
Angular looks like the desktop version
The vanilla app uses mobile-friendly sizes
I still have no good answer for the performance issues but the map rendering problems were due to a missing <meta> tag in the <head>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
</head>
solves this one! \o/
I'm using textAngular as a WYSIWYG text editor in an angular app. It is a fantastic library that is essentially plug and play. It works perfectly in Chrome and Firefox.
The problem is when I attempt to paste some text into the textAngular window in IE it simply doesn't work. It doesn't raise any console events, throw any exceptions or anything. On the network, it calls 4 URLs, which are then all aborted. They are:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
http://fonts.googleapis.com/css?family=Roboto:400,300
http://www.textangular.com/css/style.css
This network activity does not happen in Chrome and Firefox. So, I think that is where the problem is. But for the life of me I can't figure out what is going on. It doesn't look like this problem has been reported to the textAngular team or has been asked on stack overflow.
Does anyone have an I idea of how I can remedy the situation?
Edit:
Here is a plunk replicating the situation. It is the demo from the github repo, almost verbatim (the link to the textAngular links were dead, and I got ride of the initial text). I'm pretty sure that it is just a problem within the 1.2.2 library and I'm going to report a bug. The version on the main page is 1.2.0. Thanks for you help!
I tested your solution on IE 8,9,10 & 11 without any issues. I did however notice it the page was not formatting correctly no IE. It could be an issue with escape characters.
If you could provide some more details about your system, for example: IE version, the code you tried to paste etc. I think I may be able to sort this one out.
I'm working on an Angular project that will be included in a HTML page I don't have control on.
Actually I only have access to what is inside the <body> element.
There are many constraints which are not the easiest to deal with:
1- I can't change the doctype:
2- I can't remove this meta tag:
3- The app has to load an XML file
I managed to overcome points 1 and 3 but point 2 gives me a headache !
Here is the error I get when I test on IE8+ (it works fine on IE7 and other browsers):
[$sce:iequirks] http://errors.angularjs.org/1.2.12/$sce/iequirks
IE8 in quirks mode is unsupported
error in component $sce
Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
I found many solutions on forums but no one has worked so far...
Especially hoped that disabling $sceProvider (code below) would make the app work on IE8+ but it didn't:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);`
});
I even tried to add <!doctype html> to the top of my HTML document, which I am not allowed to but which I did just for the test, and it doesn't solve the problem.
Any help or suggestions greatly appreciated cause I'm really stuck right now...
Thanks
Got it !!
I simply needed to give the name of my app instead of silly "ie7support" in the code below:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);
});
Found thanks to a deeper look at this article:
http://docs.angularjs.org/api/ng.$sce
Hope it can help some of you !
IE in quirks mode is not supported by AngularJS
Thanks for your answer Adam but according to these messages, disabling $sce completely helps AngularJS to support IE in quirks mode...
https://github.com/angular/angular.js/issues/3633
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode
let's assume I have a so called 2.0 app, compatible from IE6 upwards. The app uses quite complex CSS and is driven by heaps of JS. It works, very well it does.
Now let's assume there is a client who own a strangely coded site, archaic in ways, and forces IE7 emulation through this wonder of a tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Now, he desires to use my app, which is injected in his code using a simple external script call. It works, but not so under the IE7 emulation - obscure bugs from Hell start appearing, not even overflow hidden works properly. By itself the app does work in IE7, but as it turns out, the IE7 emulation is not the same as IE7 and has it's own set of fancy issues.
Turns out the client is unable to strip the emulation meta tag, so I'm left with I don't really know. Does anyone know of ANY WAY I could overpower the rendering mode set in the page header or would there be some other suggestions?
My utmost thanks for anything usable.
Perhaps you could make a wrapper for your app. An iframe that contains an empty page to make the script call. The content of the iframe should not be affected as the meta won't be present in the empty page.
I have recently developed a couple of websites for a local vets and car valeter which look fine in internet explorer 9 and firefox but when viewed in internet explorer 6 or 7 it just goes wrong
In the car valeting all the boxes move down so they do not run as i have placed them (this only happens in IE6 not 7
in the vets website there is a lot of whitespace at the bottom of quite a few pages before you reach the footer. I know IE6 and IE7 are outdated but I would still like to fix the errors if possible.
Thank you for your help.
Dont forget the doctype on the top of your html file, otherwise the browser will
work in quirks mode instead of compatibility mode. Might solve your issue. Also no one uses IE 6 anymore, do not bother
check your site with the w3c validator and fix qny errors nd warnings, besides that there isnt much you can do
A helpful approach would be to use frameworks for JavaScript (jQuery) and CSS (BluePrint) for cross browser compatibility. It will take time to migrate to new coding, but will be worth it.
On a side note, if you do not mind redirecting the users of IE 6/7 to a page suggesting they upgrade their browsers, then you may try something like this in your JS:
var browserVer=parseInt(navigator.appVersion);
var browserName=navigator.appName;
if((browserName=="Microsoft Internet Explorer" && browserVer<=6) || (browserName=="Netscape" && browserVer<=3))
window.location="Incompatible.html";
Where 'Incompatible' is the page where you want to redirect. Also if you use above as a function, make sure you call it:
<body onLoad=yourFunction()>