Open GaryWenneker opened 9 years ago
We are facing the same issue. Our application is not loading in IE11, getting the below error in console, angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration).
Could you please let us know any solution available for this or please let us know where this hack can be applied.
Thanks in advance!
Same here. This seems to be a somewhat bizarre issue with the latest IE11 update. The relevant bit of code in deckgrid is this:
Deckgrid.prototype.$$getLayout = function $$getLayout () {
var content = $window.getComputedStyle(this.$$elem, ':before').content,
layout;
if (content) {
content = content.replace(/'/g, ''); // before e.g. '3 .column.size-1of3'
content = content.replace(/"/g, ''); // before e.g. "3 .column.size-1of3"
content = content.split(' ');
if (2 === content.length) {
layout = {};
layout.columns = (content[0] | 0);
layout.classList = content[1].replace(/\./g, ' ').trim();
}
}
return layout;
};
If you exchange the first three lines of the function with this:
Deckgrid.prototype.$$getLayout = function $$getLayout () {
var styles = $window.getComputedStyle(this.$$elem, ':before'),
layout, content;
// console.log(styles);
content = styles.content;
and then use the debugger to inspect respectively the styles
and content
variables, you'll note that the styles.content
attribute exists, but seems to disappear into a 'none'
string when you try to assign it.
However, if you try to print the styles
variable with console.log
before you assign it to the content
variable, it works!
I am deeply puzzled.
(Edit: Added an outcommented console.log(styles) to illustrate)
GaryWenneker's workaround seems to work, though you have to extract the CSSStyleDeclaration first, like I do above. In the context of my example:
Deckgrid.prototype.$$getLayout = function $$getLayout () {
var styles = $window.getComputedStyle(this.$$elem, ':before'),
layout, content;
styles = $.extend(true,{},styles);
content = styles.content;
As far as I can see though, this workaround is dependent on having a full jQuery available. I don't think the jQuery Lite that comes with Angular includes .extend
, and angular.extend
doesn't seem to work in the same way.
@praabjerg workaround successfully corrects the issue. Thanks!
yo! It worked...Thanks!
Here is some additional info: The bug only seems to occur with IE11 version:11.0.9600.17843 - update version: 11.0.20. When you use IE11 version: 11.9600.17914 -update version: 11.0.21 it works.
@praabjerg Thanks for the fix.
a client reminded me of a page not rendering. when looking further it showed that Chrome, FF etc were working fine. I found out that it had to do with the initialization of the content variable. before parsing the content var I added a console.log(content) and suddenly the page came to life (weird!!!). Because I didn't want to leave the console.log in the code I added this:
this hack magically works so I hope others will benefit from it. Better solutions are welcome :-)