Form's design distorted on two pages

[PsmTicklingParticipant]

Hello.
I’d like to know why on two pages of my website (the “Models” and “Video Store” sections of the menu) your search engine’s design appears distorted (it occupies all the width of the page).
This form is giving me a hard time to attach screencaps, but here are the two pictures I’ve taken: https://postimg.org/gallery/1ob47wxlo/.

Matteo

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Matteo,

That is not actually an ajax search pro search bar, but I believe I can still help you 🙂
The reason is that the input and the button are set to be as a ‘block’ layout elements, therefore both of them occupy on ‘chunk’ of the site space horizontally.

To get around that, the best way is to set their parent element (the form) to have a flexible display property, so all of the elements (input and the button) will be spaced dynamically next to each other, occupying the same horizontal space – and their width will be calculated by the browser accordingly.
To achieve that, use these custom CSS rules:

#searchform {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#searchform .screen-reader-text {
    display: none;
}

#searchform input[type=text] {
    margin-right: 16px;
}

These will result in the following layout: https://i.imgur.com/djrBoOH.png

I hope this helps!

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

[PsmTicklingParticipant]

Hi Ernest.
That’s exactly my problem: I DO have an Ajax Search Pro bar set on my site! It SHOULD appear on EVERY page!
That’s what I’m asking: why on those two pages alone does THAT THING appear?

Matteo

[Ernest MarcinkoKeymaster]

Hi,

If you have the search form override activated and still the default search forms appear, that means those are hard coded into the corresponding theme files – and are not possible to replace automatically.

The only way is to manually find the template files with the forms, and replace them with the search PHP shortcode. For that you might have to ask the theme developer to find it.

Alternatively, if you want, I can look it up and replace it for you if I can. I will need back-end and FTP access for that, and I can’t guarantee that I’m able to do it, as it’s beyond the plugins scope. So far I was able to help in similar situations, so I think it’s definitely worth a try 🙂

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

[PsmTicklingParticipant]

No no no. 🙂 I may be explaining myself terribly.
I have DOZENS of pages on my website. In ALL of them I have YOUR seach form appearing. It should appear 100% of the times, as I have ALREADY put in, via shortcode, in my template.
In ONLY those two pages, your search form is replaced by that ugly thing I showed you.

[Ernest MarcinkoKeymaster]

I see!

In that case I think I know what the problem might be. Do you happen to use any cache plugins? Because someone about a few weeks ago had a similar issue, and it was related to how the page was cached, and since then I was able to find a solution as well.

It’s related to a fall-back method that the plugin uses whenever someone with a very very old browser (namely Internet explored 8 and below) visits the site. Then the search shortcode is replaced with the default search engine automatically. Now, some cache solutions might not create different versions of the cache for old browsers, thus showing the fall-back search for all browsers.

The solution I came up with was simply an option on the Compatibility Settings submenu: https://i.imgur.com/zX2d5uu.png
After turning that option OFF, make sure to clear all your website cache. After that, the ajax search pro search bar should start appearing everywhere as expected. If not, then it’s still cached somewhere – page cache, CDN cache, cloudflare etc.. – so make sure to clear them all, if you use them.

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

[PsmTicklingParticipant]

Wow. You’re REALLY good at this! xD
Ok, good news is: it’s gone…for NOW.
What I’m afraid of is: I cleared my website cache yesterday and it went away immediately after that. Today, it was back.
Are you positive that, with this method, now that’s it gone, it won’t be back tomorrow?

[Ernest MarcinkoKeymaster]

Thanks!

Yes, I am pretty sure that this should not come back after turning off that option. Let me know of course, if it happens otherwise.

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

[PsmTicklingParticipant]

Well, in case it doesn’t come back: thank you VERY much and, as always, you’ve been super fast, kind and competent.
Have a good day!

[Author]

Posts