responsive display bugs

[vaudorParticipant]

Hi

I am trying to intergrate ajax search pro to a wordpress theme, H-Code. turns out that theme is in the 1% where we can’t replace default search. So I did two tests on http://www.vaudor.com/ceea/

1.ajax search included in menu
2. ajax search in modal (open modal by clicking on the menu far-right search icon).

In both cases the search results are not responsive
1. try search term “japon”: results go lower than screen size, and user can’t scroll. Try “dessin”, a scroll is added (although it’s rather glitchy), but bottom is still cut

2. Modal ; (ajax search pro is below default search, for testing): results go beyond screen and can’t be scrolled.

Is there any way to get it to display properly ? How come the results box is not taking into account screen height to add a scrollbar ?

Thanks!

[vaudorParticipant]

Of note, the bottom spacing issue with search in menu was due to being logged in and the WP toolbar taking space. However there is still a responsive issue with this, on phones when the menu is collapsed: the results appear below search box but are not scrollable like menu items should be.

[Ernest MarcinkoKeymaster]

Hi,

Thank you for all the details, it helps me a lot!

There are a few things I noticed, one is, that there is a global transition animation with a custom timing forced on all elements on the page, affecting the scrolling, as well as the positioning. First, I would recommend this custom CSS, to remove this conflicting animation from the search elements:

.asp_w, .asp_w * {
    transition-timing-function: unset !important;
    transition-duration: unset !important;
}

.asp_r_1_1 {
    z-index: 99999999 !important;
}

This will also fix the z-index issue with the modal search bar. I have also turned off this option: https://i.imgur.com/S1kgCx5.png
Because the search position is within a fixed container element in both cases, the scrolling effect will do nothing, except a weird scroll down a jump of the results box to correct the mistake.

I also noticed, that on some mobile views, the menu container is wider than the screen, so when the plugin follows the container widh, it is streched from the screen. To resolve that, I recommend setting a fixed container width for mobile screens, maybe 320px or so: https://i.imgur.com/EUheOcv.png

If there is still a noticable issue with scrolling, then maybe turning off the custom scrolling script is the best idea: https://i.imgur.com/ErUSnmV.png
While that script is very robust, some pointer event custom CSS rules or scripts affecting the scroll behavior can conflict with it.

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[vaudorParticipant]

Hi

Tried those, still problems…

1. search in menu : on smartphones, the search results are displayed on top of menu instead on inside the menu. and the plugin scrolling does not work. It seems a solution would be to parameter the plugin differently for phones, but can it be done ? ie: default display with scroll for desktops, block display for tablets and phones without plugin scroll (if search results are in menu, it will be the menu that scrolls).

2. search in modal : plugin scroll is not working on phones (tested on windows phone). Does this have to do with the modal, or is it a problem with the plugin ? The modal would be the best solution if the scrolling worked…

On either implementation there is still the problem that the plugin is not responsive, it does not react to screen height. So for example with menu search on desktop if I reduce browser height, the bottom of the search results are cut. Using the modal makes it better as the search results box is less tall, but then if the scrolling does not work on phones I can’t use this option either.

If nothing else works, I guess a not-great solution, but better than nothing, would be to just link to a new page with the search on top of page. If plugin scrolling does not work on phones, my option would be to deactivate plugin scrolling and just let the scrolling be done with usual browser scrolling ?

[vaudorParticipant]

Of note : I did a simple page with only search: http://www.vaudor.com/ceea/search/

Plugin scroll is not working at all on windows phone. Is this a problem with theme compatibility, or is it a known bug that scroll does not work on windows phone?

If I deactivate scrolling, the scrollbar is replaced with default browser scrollbar…isn’t there a way to have no scrollbar at all, just display the full list and let the usual browser scroll do the scrolling ?

[Ernest MarcinkoKeymaster]

Hi,

I think this might be a custom script issue, there are no known problems with any recent devices/browsers with the scrolling script. I don’t have a windows phone in the office at the moment for testing, only a few different android/IOS devices, so I can only check via browser emulators, but of course those work, so I guess the phone emulation is not fully functional.

There is a way to simply disable the scrolling, by increasing the viewport size to a very high number, like 200: https://i.imgur.com/wCQc03B.png
The results box height will be basically unlimited, and the browser will not trigger the scrolling whatsoever.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts