CSS grid configuration not found - Chrome

[rodrigoreis22]

I've seen the other issues about this, but I'm still having the error:

angular-deckgrid: No CSS configuration found

Chrome version: 33.0.1750.117

My css configuration: .deckgrid[deckgrid]::before { /* Specifies that the grid should have a maximum of 4 columns. Each column will have the classes 'column' and 'column-1-4' / content: '3 .column.column-1-3'; font-size: 0; / See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */ visibility: hidden; }

.deckgrid .column { float: left; }

.deckgrid .column-1-3 { width: 25%; }

[akoenig]

Does the demo application work for you?

[rodrigoreis22]

Yes.. it works.. And the websites that uses deckgrid also works.. that's weird.

[akoenig]

@rodrigoreis22 Do you have any updates regarding your issue?

[rodrigoreis22]

No. For now I'm forcing the content to be "3 .column.column-1-3" if the variable is null after trying to select it from CSS.

[frankV]

I'm having the same problem but like @rodrigoreis22 said; the demo and other examples work. I haven't been able to implement a workaround. Also, I read the other issues and this is happening in both Chrome as well as Firefox.

[dvzrd]

Same problem here. I pretty much copied the same css files and js files as in the demo. Doesn't work in chrome but works in safari and firefox.

The demo in the docs works fine in chrome though. Can't wrap my head around this.

[pandaiolo]

Same issue here in v33.0.1750.152.

By logging the getComputedStyle content in the console, we can see that the value is fine, so it is definitely a race condition. Only in the early stage of page loading the value is not set.

I tried to put a $timeout in the Deckgrid() instanciation, to defer execution, and it works :

        $timeout(function() {
            //
            // The layout configuration will be parsed from
            // the pseudo "before element." There you have to save all
            // the column configurations.
            //
            self.$$scope.layout = self.$$getLayout.bind(self)();

            self.$$createColumns.bind(self)();

            //
            // Register model change.
            //
            watcher = self.$$scope.$watch('model', self.$$onModelChange.bind(self), true);
            self.$$watchers.push(watcher);

            //
            // Register media query change events.
            //
            angular.forEach(self.$$getMediaQueries(), function onIteration (rule) {
                function onDestroy () {
                    rule.removeListener(self.$$onMediaQueryChange.bind(self));
                }

                rule.addListener(self.$$onMediaQueryChange.bind(self));

                self.$$watchers.push(onDestroy);
            });
        });

It might be not the best place to do the defer, it just works for me now.

[pandaiolo]

I just proposed a PR for anyone who wants a quick fix. Instead of bulky workwround above, i just added a timeout in the descriptor :

         $timeout(function() {
            return Deckgrid.create(scope, elem[0]);
        }).then(function(desc) {
            self.$$deckgrid = desc;
        });

[pandaiolo]

This is crazy, even with the timeout it breaks sometimes.

I even had to add a real delay like 100ms (as $timeout function param) in some case, it does not work without, or even with a 10ms delay...... I really cannot understand how the getComputedStyle can be empty so many ticks after the element was added to the DOM

Edit: here are a few debug information with OSX 10.9.2 Chrome v33.0.1750.152

Content not yet ready after ms 1396020009103 // Date.now() with repetitive timeout in the directive
Content not yet ready after ms 1396020009115 
Content ready after ms 1396020009127 // 24ms after first check

[pandaiolo]

Followup to my previous comment:

I made a codepen to better understand the issue. It happens that getComputedStyle for the pseudo :before element might not be ready in specific cases, for example when element is not shown. I made a codepen to illustrate this behaviour :

• When hidden at first, deckgrid does not load because stye not available
• When not hidden, chrome sets style and deckgrid has no issue

I updated my PR to make is less hacky and dropped the somewhat random $timeout in favor of a more reliable $watch on the element. Once element ready, the watcher is discarded. Also, browser not showing this problematic behaviour will not be impacted with any delay.

Please confirm if the demonstration displays the same behaviour for your config ?

First codepen tests on OSX 10.9.2 :

• Chrome 33.0.1750.152 : Fails
• Safari 7.0.2 (9537.74.9) : Fails
• Firefox 28 : Works
• Opera 20.0.1387.91: Fails

On Nexus 5 Android 4.4.2 :

• Chrome 33.0.1750.170 : Fails
• Firefox 28.0.1 : Works

On iPad Retina iOS 5.1.1, and Android Opera, both codepens fail to load, i suspect an issue with codepen though.

[lafama]

I ended up hard cording the values i wanted in the angular-deckgrid.js file

Deckgrid.prototype.$$getLayout = function $$getLayout () {
            var content = '3 .col-md-4',//$window.getComputedStyle(this.$$elem, ':before').content,
                layout;

[MichaelSEA]

I had the same problem described above (when hidden at first, doesn't set up correctly) and @lafama 's workaround above unblocked me for the time being...

[nudge]

+1, having this problem too on Chrome v34.0.1847.131. Integrating @pandaiolo's domWatcher fix (pull request https://github.com/akoenig/angular-deckgrid/pull/41) does the trick for me :)

[MrOrz]

+1 having exactly the same problem. Unfortunately pull request #41 sadly doesn't help. The cards would appear when I set a breakpoint directly on the callback of domWatch, but it never goes into its if block when I remove the breakpoint. It seems like that window.getComputedStyle is not ready before the entire digest cycle is over.

In the end, I tied a controller with $timeout(function(){}, 100) on the parent element to trigger $digest after 100ms, and it worked. (p.s. I am using @pandaiolo 's fork too)

[zheref]

Hey guys. I don't get it. The deckgrid is supposed to be generated by its corresponding directive. So, what's the solution to this? How can I generate the deckgrid just when the slide (I'm using Ionic's slidebox) is shown and not before?

I appreciate your soonest help.

[ivanbreet]

I also have the same issue. Having deckgrid in a tab throws the No CSS configuration found error.

[devniel]

Same problem here, even with the last version. It has problems working inside a modal, whereas it works fine outside.

[AddoSolutions]

:+1: Same issue here. I wonder if we were to have a "backup" element somewhere in the page that we can set the class to .deckgrid and it will use that configuration if it fails it find it on the element. My issue is in a ngBootstrap modal as well.

[firebean3]

I just had the same problem: I'm using the deckgrid inside a tab inside on modal (both angular-ui). The CSS was not found. I solved it with a little hack:

1. I added an element before the deckgrid inside the tab with the attribute ng-init="initialised=true;"
2. I added to the deckgrid the attribute ng-if="initialised"

[feus4177]

@rodrigoreis22 when I had this issue it was because I was trying to use the directive as an element. Changing <deckgrid ...> to <div deckgrid> solved the issue for me.

[JalalAlbasri]

@feus4177 D'oh! Me too.

[drewfreyling]

Is there any progress on this or #69 ? These have been around for a while...

I'm noticing them in Safari and iOS as well - even with <div deckgrid> inside a set of tabs.

[Tsarpf]

I have this problem on Safari as well. The "fixes" in this issue and #69 do not solve it.

EDIT: (But it does work on all other browsers, even mobile ones)

[flyfj]

same issue in safari, please help!

[ajoslin103]

firebean3's solution worked for me inside a bootstrap 3 modal in an old Angular 1.5.9 app

                        <div ng-init="initialised=true;"></div>
                        <div ng-if="initialised" deckgrid source="photos" class="deckgrid">
                            <div class="a-card">
                                <img src="" data-ng-src="{{card.src}}" width="150">
                                <h4>{{card.id}}</h4>
                                <h4>{{card.title}}</h4>
                            </div>
                        </div>