How do I prevent overlapping of Bootstrap 5 Cards with an embedded tweet?

Question

Hello Dreamweaver Pros,

I'm experimenting with Bootstrap 5 -- have never really used it but thought I'd give it a try.

I'm looking at putting together a page with masonry layout (like Pinterest) using Bootstrap 5 cards and it seems really easy using some Javascript to make it work. However, when I put an embedded tweet into the card there seems to be a problem. It's as if the script pulling up the tweet doesn't load before the other cards and the cards then overlap. I size my browser down to phone view and looks great. Unless I resize it SLOWLY to full screen, the other card still overlaps (just not as much).

Here's the generic sample template: http://www.daveharrison.info/test.html

And here is the same but with one tweet as content: http://www.daveharrison.info/test2.html

I suspect part of the problem might have something to do with the tweet not loading before the rest of the page loads. If so, is there a simple fix to not load the page until all script has been executed?

Is it bad practice to embed a tweet in a Bootstrap card?

Any advice appreciated.

Thanks,

Dave

osgood_ · Accepted Answer

Thanks Osgood,

As you know I'm no expert, but this is what I suspected. It seems once I resize the browser (slowly) the cards do contain the tweet and the other cards fall in place properly. I was trying to figure out how to delay page load until the twitter scripts have had a chance to do their thing, but that probably makes no sense. How do I set a time out to the masonry script? I would love to give your code a try.

As always, thank you!

Dave

Thanks Osgood,

As you know I'm no expert, but this is what I suspected. It seems once I resize the browser (slowly) the cards do contain the tweet and the other cards fall in place properly. I was trying to figure out how to delay page load until the twitter scripts have had a chance to do their thing, but that probably makes no sense. How do I set a time out to the masonry script? I would love to give your code a try.

As always, thank you!

Dave

By @daveharr1s0n

Instead of hard coding the script:

Try dynamically generating it, so remove the hard coded link to the masonry script and replace it with the below which has a 1 second time delay:

<script>
setTimeout(function(){
let masonryScript = document.createElement( 'script' );
masonryScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js');
document.body.appendChild(masonryScript);	
}, 1000);
</script>

So far, for me at least, its worked every time BUT its not a guarantee because if the twitter script is delayed for more that 1 second then the masonry script will fire off and you will end up with the same result, overlapping <divs>. Twitter servers should be super efficient at delivering content, so it may help.

There is another method which checks the twitter script has been loaded every 1 second before the masonry script fires off but that is a bit more involved. Try the above first and see what results you get and if it doesnt work for you we can try the more complex method.

This issue needs to be flagged up to the script produces as using dynamic data pulled in from APIs is common practice. If the script only works with static data that needs to be pointed out somewhere in the scripts information page. I don't know anything about the script, never used it, so maybe it is addressed somewhere in the information they provide.

osgood_ · Answer

It all looks a bit dodgy to me, a lot of absolutely positioned divs. I don't know why dynamic data (the tweet) acts the way it does when static data works as expected. It has something to do with the masonry js file I suspect because if you comment that out then the tweet gets inserted correctly. A sticking plaster fix is to give the card-body that the tweet is in a height of 630px. The tweet itself is set to 615px height I believe, that has the desired effect, but its a really poor, poor hack. I don't know the masonary script or how youre supposed to set the css up but I'm sure there is probably a more elegant solution. If not I wouldn't use it personally, does it actually add much value.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded