Ajax filter is duplicating in sticky menu

[esupplyParticipant]

Hello,

I have the Ajax search pro installed on my website and i’m having a weird issue that I can’t seem to fix. The following filter is having issues : Winkel – Zoeken met categorieën [wd_asp id=3]. I have this filter linked to a footer widget (3) and i’ve put this inside my left sidebar in Elementor pro on the https://www.esupply.be/winkel page. In attachment you can find the issue, when I scroll down the filter menu becomes a duplicate of itself. I tried to fix it with sticky plugins (maybe it was related to Elementor pro), but all with the same result..

Can you let me know what the issue is, and fix it?
Excuse me for the low quality video, the maximum file size allowed is only 8MB here.

Best,
Andrea from eSupply.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

It is actually elementor doing the duplication – I guess that is how the sticky sidebar works.
I think the best and easiest solution is to set the background color of the sticky container to white. You can try doing that via the elementor editor, or use this custom CSS:

.elementor-element-3cf68b4 {
    background: white !important;
}

I recommend rather using the elementor editor to set the background if possible, as this custom CSS may not work correctly in all cases.

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

[esupplyParticipant]

Hi Ernest,

Thank you so much for your fast reply. I tried it and it indeed fixed (part) of the problem.
But it still issues, because putting a white background isn’t the proper solution in this case i’m afraid.

Anyway, I decided to work with another plugin for the filter sections, here it is working correctly without issues.
So I still think part of the issue is at Ajax search pro?

But thank you for your help, and have a great day!

Best,
Andrea

[Ernest MarcinkoKeymaster]

Hi Andrea,

That is very interesting. I was able to replicate the issue on our test servers. I debugged this form almost an hour, and I can conclude that neither of the plugins is at fault here. This is some sort of a weird browser/CSS rendering issue. Elementor makes a copy of the sticky element, then hides the “non sticky” original version. For some reason the CSS property that should hide the container does not have any effect – which is theory is impossible.
I tried to google around for similar rendering issues, but there is actually no information about anything similar. Basically the white backround solution is all right, because it does the same thing – it covers up the underlying layer, that should be already hidden.
However I came up with a much better custom CSS, that forces the same behavior that elementor does, and corrects the rendering problem:

.elementor-sticky__spacer .asp_w,
.elementor-sticky__spacer .asp-try {
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

I will intergrate this into the upcoming release as well, so this issue is properly resolved.

Thank you for all the details, it helped me a lot to resolve this!

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

[esupplyParticipant]

Hello Ernest,

Yeah thats what I also thought, the background was a part of a solution but not complete as it still has the same issues.
Now with the other plugin I am using, it has zero problems, so it’s weird that it works with this plugin perfectly but not with Ajax search pro.

Now, thank you so much for investigating this, I will check if I switch back to your plugin on with these changes! And i’m happy I could help you with fixing this bug.

Maybe a last question, i’m not sure if I need to make a new ticket for this or if I can ask it here.
Is it possible to display the searched items I did with Ajax Search pro? Example: I searched ‘pizza’ and I want to see on the front end: Your searched results for pizza. And if this is possible, is it also possible to have a little X next to it so it removes the searched item without going to the search bar?

Thank you so much!
Best,
Andrea from eSupply.

[Ernest MarcinkoKeymaster]

You can ask it here of course.

I’m afraid that is not possible. Maybe I can add this as a feature request though, I’m not sure if this is possible to implement, but worth a try.

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

[Author]

Posts