See this question on stackoverflow.
I am trying to use a Twitter Collection Grid (like this one: https://dev.twitter.com/web/embedded-timelines/collection) on the site that I’m building, using an angularJS directive. The widget shows on the site but the grid does not work. Instead of showing in a grid formation the pictures stack on top of each other, all with the width of the widget. Resizing the widget does not work for getting them to show as a grid. The weird thing is that some times when I reload the page they are working, but that is like every 10th time I reload, and I cannot get it to work consistently.
This is the html I’m using:
<div id="twitter-collection">
<twitter-collection></twitter-collection>
</div>
And this is the directive:
.directive("twitterCollection", [ function() {
return {
restrict: 'E',
template: '<a class="twitter-grid" href="https://twitter.com/_/timelines/539487832448843776">Tweets with pictures</a>',
link: function(scope, element, attrs) {
function run() {
(! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs"));
console.log('run TwitterCollection script');
}
run();
}
};
}])
Have someone experienced this problem? Or just gotten the Twitter Collection Grid to work and how did you do it? Or could someone help me find out why this is not working? Thanks!
