Comments (25)
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:
- I added an element before the deckgrid inside the tab with the attribute ng-init="initialised=true;"
- I added to the deckgrid the attribute ng-if="initialised"
from angular-deckgrid.
Does the demo application work for you?
from angular-deckgrid.
Yes.. it works.. And the websites that uses deckgrid also works.. that's weird.
from angular-deckgrid.
@rodrigoreis22 Do you have any updates regarding your issue?
from angular-deckgrid.
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.
from angular-deckgrid.
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.
from angular-deckgrid.
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.
from angular-deckgrid.
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.
from angular-deckgrid.
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;
});
from angular-deckgrid.
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
from angular-deckgrid.
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.
from angular-deckgrid.
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;
from angular-deckgrid.
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...
from angular-deckgrid.
+1, having this problem too on Chrome v34.0.1847.131.
Integrating @pandaiolo's domWatcher fix (pull request #41) does the trick for me :)
from angular-deckgrid.
+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)
from angular-deckgrid.
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.
from angular-deckgrid.
I also have the same issue. Having deckgrid in a tab throws the No CSS configuration found
error.
from angular-deckgrid.
Same problem here, even with the last version. It has problems working inside a modal, whereas it works fine outside.
from angular-deckgrid.
👍 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.
from angular-deckgrid.
@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.
from angular-deckgrid.
@feus4177 D'oh! Me too.
from angular-deckgrid.
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.
from angular-deckgrid.
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)
from angular-deckgrid.
same issue in safari, please help!
from angular-deckgrid.
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>
from angular-deckgrid.
Related Issues (20)
- Error on safari
- regex for checking deckgrid styles does not work in IE9
- Virtual Scroll HOT 2
- number of columns
- Edge issue with class(es) on [deckgrid] HOT 2
- Any plan for Angular2? HOT 1
- Initial Setup
- after adding more data to source, how to notify the layout? HOT 1
- Nested transclude broken HOT 2
- OrderBy
- How can I use angular-deckgrid with the latest angularjs version?
- .
- Supporting differing templates based on condition
- shortcut mother.* doesn't work
- give index when card select
- Dynamic columns HOT 2
- Submit to npmjs.com! HOT 9
- Scroll down to load more
- Module Loader Support
- Dynamically changing the number of columns HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-deckgrid.