Search results issue

[jamiedallaireParticipant]

Hi there,

We are running into an issue with the search element within a Elementor popup… mostly on a small screen. This seems to be a new issue, as this wasn’t present at launched. Here’s a detailed video of the issue: https://www.screencast.com/t/SlzAwE7xv9Qg

– On a smaller screen, not all results are showing.
– On a smaller screen, it does not allow us to scroll to the bottom of the browser.
– When scrolling, it now creates an added spacing between the search bar and the results.

Thank you in advance.

[Ernest MarcinkoKeymaster]

Hi,

The best way to deal with fixed scrollable containers (like this popup) is to change the results layout from the default “hover” to a block. Since you have added access, I logged in and changed that for you. Now the results container is simply printed below the search bar, and does not hover over the content, but is positioned nicely without generating gaps from incorrect scroll heights.

The height issue can be addressed with a small custom CSS snippet:

.asp_r_1 {
    max-height: 65vh;
}

Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.
You may need to change this to your exact case, but this will prevent the results box being larger as the overall 65% screen height.

• This reply was modified 1 year, 9 months ago by  Ernest Marcinko.

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

[jamiedallaireParticipant]

Hi Ernest,

Thank you so much. With your detailed explanation, I was able to get the popup to an acceptable new layout that works better on smaller screens.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts