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 had sent this request earlier and it was solved using the following:

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

This worked perfect. However, we changed the results do display a maximum of 60 results and the issue started happening again. Not sure if the original CSS we entered is being overridden somehow?? Do you have a fix for this?

Also is there a way to change/decrease the font size in the dropdown menu via CSS?

Please let me know ASAP.

Thanks so much!

[Ernest MarcinkoKeymaster]

Hi,

The issue is not related to the results count, but the parallax overflow. Also, there is a different custom CSS applied there in the custom.css file, that overrides this one:

/* Added March 2018: eschmid | Reason: navigation on internal pages being hidden by blue screened image on the page; z-index for this id had been set to 999 */
#av_section_1 {
	z-index: 1;
}

That is not a big issue, but the overflow is. The parallax type background changes the overlow property of the av_section_1 element (that contains the search and the drop-down) to ‘hidden’. I guess that is required for the parallax to work properly. However this causes an unsolvable problem, as nothing can ‘escape’ this element boundaries. Hidden overflow means, that “The overflow is clipped, and the rest of the content will be invisible”. And since the search and the drop-down are inside of this element, it is not possible for them in any way to pop over it.

This time, it is not actually the results container hovering over the drop-down, but it is actually cut off by it’s parent element. Unfortunately there is no way to get around it, as this is a CSS specification. I guess turning off the parallax effect will revert back the overflow to the original value as well.

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

[Author]

Posts