Search Dropdown Filter Issue

[braylon88Participant]

Hey Guys,

I have set up the ajax search function very similar to the “staff search and filter” example through your site. Here is that search: http://61c.6bd.myftpupload.com/products/

As we are going through the development of this search function there is one BIG issue that is happening. When you choose a dropdown filter from the “Choose a Product” the dropdown list is tucked behind the results and not clickable. We have tried to identify classes or IDs attached to that dropdown and then increasing the z-index in the css. However nothing has been successful. We also reached out to an external developer and they came back saying they were unsuccessful. The demo you have on the site doesn’t suffer from the same issue. We need this to be fixed ASAP. Everything else works wonderfully. Can you please give us a solution or go in and set it up to work correctly??

Please let me know ASAP.

[Ernest MarcinkoKeymaster]

Hi,

Thanks for the proper details, I was able to find the cause.

The plugin z-indexes are fine, but because the search and settings and the results are placed in different elements, those element z-indexes must be adjusted as well. If any parent element to the drop-down has a z-index set, no matter how big the drop-down z-index is set, the parent z-index will apply. And most sections have a z-index of 1, they will flow as printed – so the section containing the results will overflow the section wit the search.

To change that, this custom CSS should do the trick:

#av_section_1,
#av_section_1 main,
#av_section_1 .flex_column_div {
    z-index: 999;
}

This will change the z-index of the first section (containing the search), the main section within, as well as the container element before the search.

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

[Author]

Posts