Autocomplete malfunction on 320px

Hello,

I am using the Autocomplete functionality from “Search by Algolia” wordpress plugin and something weird happens when I am searching on my phone, but it only occurs when I am keeping my phone vertically(320px).
When I search for something, the autocomplete dropdown appears, but the visibility is very low because of the virtual keyboard, so when I scroll down, the autocomplete dropdown jumps 80% offscreen to the left.
Do you guys know why this might happen?
Thanks.

1 Like

Hey @adrian.holobut,

Often times, the autocomplete dropdown needs some css fine tuning for optimal mobile experience.

Could you share a live example of your implementation? I’d like to see if there is something we could improve based on a real use case.

Best,

Hello @rayrutjes, thanks for taking your time to check this out. Here is my live website: http://new-search-heavybit.pantheonsite.io. This seems to be a javascript issue, though. Isn’t that right?

Hey @adrian.holobut,

There are some JS issues on your page, and it is our bad.
From version 1.x to 2.x of the plugin, we highly simplified the code, but we also broke the implementation for users that had custom templates which seems to be your case.

Could you please take a look at what the default autocomplete.php looks now, and maybe refactor your changes into it again?

The Tether library is no longer shipped by default for example.

I hope that is clear, let me know if I can help more,

Best,

Thank you for your answer @rayrutjes. I tried to make some javascript changes but it seems that there is a javascript error I am getting with or without my new changes: “Uncaught TypeError: tether.on is not a function”. Do you know why’s that?

Tether is a library that was used in version 1.x of the plugin.
This is now longer required so all references to that library must be removed.

Best way to fix your issue is to go back to the original template and re-add your changes in there.

Sorry for the inconvenience,

Thank you, @rayrutjes. I managed to solve the problem.
Have a nice day.