Form's design distorted on two pages

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Form's design distorted on two pages

This topic contains 8 replies, has 2 voices, and was last updated by PsmTickling PsmTickling 6 years, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #13406
    PsmTickling
    PsmTickling
    Participant

    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.
    #13413
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13415
    PsmTickling
    PsmTickling
    Participant

    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

    #13416
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13417
    PsmTickling
    PsmTickling
    Participant

    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.

    #13419
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13421
    PsmTickling
    PsmTickling
    Participant

    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?

    #13422
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13429
    PsmTickling
    PsmTickling
    Participant

    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!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.