search

marco-pm / zencart_instantsearch

Instant Search plugin for Zen Cart
GNU General Public License v3.0
2 stars 4 forks source link

instant_search_dropdown.min.js modifies layout (Bootstrap) #39

Closed torvista closed 6 months ago

torvista commented 6 months ago

Trying to get this to work with my Bootstrap template (I have copied the Bootstrap template files from the repository).

I have the search field wide across the top: image

But once instant_search_dropdown.min.js is loaded, the search field gets reduced: image

Looking in the equivalent .tsx file, the only thing I could see being relevant was this:

if (resultsContainerDiv.clientWidth > 250) {
                setAdditionalClass(' instantSearchResultsDropdownContainer--lg');

But commenting-out these classes in the css, or increasing the >250 in the unminified code had no effect.

(I know Bootstrap has its own ajax search but that's a modal which I don't like/I prefer one search field to type into, and I had no initial success modifying that one to work on the native field/instead of the modal.)

marco-pm commented 6 months ago

Your navbar and quick_find_header form seem a bit different from the Bootstrap template default. Can you share your HTML and CSS for those?

torvista commented 6 months ago

pm sent

marco-pm commented 6 months ago

You changed the quick_find_header bootstrap class from form-inline to w-100. In order for the search input to stretch horizontally just add flex-grow: 1; to .instantSearchInputWrapper in stylesheet_instant_search.css. It's just a matter of custom css anyway, no changes are needed to the code so I'm closing this issue

torvista commented 6 months ago

Thanks, pardon my ignorance, I don't find Bootstrap css intuitive at all...it's effects are never as I expect.