Conflict between tntsearch and bootstrap

Support
1

Hi everybody, I am developing a video site for a university using Grav. It is an incredible CMS but I encountered an issue that I don’t know how to fix.

I am using bootstrap 4.0.0 beta as the frontend core, and I wanted to add a navbar search similiar to youtube’s, so the tntsearch plugin was the option of choice.
The thing is, when both bootstrap and tntsearch .js files are called, only tntsearch works.

So, calling only bootstrap means that every element is displayed correctly on the frontend, but then the search bar is useless. On the other hand, calling tntsearch means that bootsrap dropdowns don’t work, meaning the menu won’t open on mobile displays.

I don’t know much about javascript or jquery, so I can’t see what the problem is. Ah, and when both bootstrap and tntsearch are called and bootstrap dropdowns don’t work, there is no error or warning messages on the console, even when using them.

So I am pretty lost here :)… Any help would be much appreciated.

1 Like
2

When you add the assets to the site try adding the tntsearch.js before bootstrap.js.

Is this a custom theme you make or based on another theme?

I am making a custom theme now also with BS4beta and also with a search function, but have not come to making the search functional yet. But since you ask I will try out tntsearch.

So I will come back with an answer if I get it working.

3

It is a full custom theme. I had the html files created before (I almost always do that) and then I just had to adapt everything to grav.

I have tried calling tntsearch before and after the bootstrap.js, no matter when I call tntsearch.js it seems to break the bootstrap dropdowns. I have tried both with local files and with CDNs, without luck.

Were you planning on adding a custom search or on using a plugin as simplesearch or tntsearch? If you find any solution or workaround to this situation I would appreciate if you share your solution.

4

I tried it now, and the same happens here. It is some what strange and it has to be caused by a conflict between bootstrap and tntsearch.
It is not only dropdown functions that breaks, but also several other bootstrap components. Although it seems tntsearch works fine.

5

I submitted an issue to grav/tntseach’s github to see if they can help, here is the link: https://github.com/trilbymedia/grav-plugin-tntsearch/issues/6

6

Thanks :slight_smile: Will probably be and easy fix!

7

Still nothing yet… did you manage to get a fix or a workaround, @procrates ?