<div class="post-list" id="search-hits"> is overriding my bootstrap cards in Jekyll

I’m new to Jekyll and in the programming world altogether, so please bear with me. The search is working accurately. The problem is that when I use div class=“post-list” id=“search-hits” as described in the blog, it overrides my cards. I’ve tried various combinations, searched for a solution on the net, nothing is working. I’m looking to have cards along with the working search. Please help!

Main content from My Default.html file

index.html

algolia.html in the includes folder

It is exactly (word for word) what we have in here in the Final Code section.

Hi there!

In the Jekyll example that you’ve followed, the idea is to populate the #search-hits with static posts generated by Jekyll. But as soon as InstantSearch loads, the results from Algolia are added inside #search-hits, so they replace the static posts.

This should be fully transparent, but that’s the expected behavior: you do get results before JavaScript loads, but as soon as they do, InstantSearch fully powers your posts list.

Could you please describe the behavior you’d like to have?

Best.

Thank you for your reply, Sarah!
I do not want anything to influence my cards (that’s the blog list). Following is the example of how I want the system to display my posts (as for now I’ve sample content).

100% • 75% • 50%

I want blogs to disappear when I search for something. Additionally, as for now, the search bar that I’ve on the screen is not working as I’ve removed the code to get the look that I want for my posts.

Hey!

It’s still not clear to me where you would like the search results to appear. You say that you don’t want anything to influence your cards (the blog list), but also that you want blogs to disappear when you search for something.

Would you like, for example, that search results appear in an overlay on top of the blogs list?

If you do, then you need to set an empty container where you want the search results to appear, and target this container in your InstantSearch code.

Here’s an example with static HTML (not Jekyll, but it’s the same idea): https://codesandbox.io/s/quizzical-hypatia-c0v5n?file=/index.html

In the index.html file, you can see there are two <div>s: #hits and #posts. The #posts container only contains static HTML, you can think of it as what Jekyll renders. The #hits container is empty, and that’s what InstantSearch is targeting (as you can see in src/app.js on line 37). When you type a query, search results appear in this container, and leave your Jekyll-generated posts untouched.

Does this help?

Best.

Yes, it does! Thank you!