Result z-index / input space

[Onica Van Heusden-BergraafParticipant]

Hi Guys,

we put the ajax search in a slider, which is placed in the header.php of our (child) theme, as we want the search to be on every page and post in our multisite.

If you search for anything, the first problem is (it doesn’t matter where we place the search in a page) the input field is small. So if you click in the middle of the search space then you can’t type. You have to click at the beginning of the search space to be able to type something.

The 2nd problem is that whenever it find his results, the results do not show up on top of the content on the page, but behind the header. This results in not seeing the results.

Any idea how we can fix this? As changing the z-index had no result.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Placing the search inside a slider might delay/ignore some javascript events like the window load and window resize event. The input field width is connected to an initial window resize event, however since the search bar is inside a slider, this event never reaches the search, most likely because it’s propagation is cancelled by the slider plugin.

The best solution in this case is to enforce a minimum width for the input field with a few lines of CSS:

.proinput input {
   min-width: 1000px;
}

The second issue is not related to the z-index itself. The slider “canvas” has a relative position, so everything inside of it is bounded by it’s borders. Thus doesn’t matter how you change the z-index, every element will stay inside the slide.
The search by default tries to prevent this by placing the result’s div at the bottom of the body element (moving it outside the slide), but only if the results position is set as hovering: https://i.imgur.com/50LHBaB.png
Try to set the results layout position to hovering, it should help.

If not, then we will proceed to another, more complicated solution.

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

[Onica Van Heusden-BergraafParticipant]

Hi Ernest,

thank for responding so quickly. I knew for sure the result worked earlier. With testing the options, we changed to the result position.
Changing it back to hover, worked like a charm.

As for the first issue, we already tried that. But it doesn’t work.
Other ideas.

P.s. the plugin is grate, but it crashed our multisite serveral times today. If we save options to much, then it just crashes and our entire domain is not accessable. we have to remove the plugin (after saving a copy) and put it back via FTP.

[Ernest MarcinkoKeymaster]

Hm. Then let’s try the same css rule but with the !important note. Try to add it to the search plugins “Theme Options -> Custom CSS” tab:

.proinput input {
   min-width: 1000px !important;
}

I’m 99% sure it should work. The dev tools confirm it as well.

The less elegant solution is to simulate a delayed window load event, as it doesn’t get to the search. Usually the solution described in this knowledgebase article works: https://wp-dreams.com/knowledge-base/tiny-input-box-on-certain-page-positions/

I’m going to be unavailable for the next 2 days, I might not be able to answer until then.

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

[Author]

Posts