website shifts position when using exsisting search field

[brucewatsonParticipant]

I am using wpmu simplemarket theme fo a marketpress store I am very excited about the opportunities your plugin gives.

The issue i have is with the existing search field in the header the entire web site shifts form centre of the screen to left when you use it and back again this is continual left centre left centre with each click in the search field or outside the site area.
on disabling your plugin it stopped and returned on activation
I have tried other search plugins that just use the existing search field and hover results below etc. is this possible to use this search field or what is the best work around for this.

I will be using your search on pages etc sofar no problem here with initial tests

is the a piece of code i can change or add to my child theme to overwrite the header search field?

if yes can you tell me what file and where to replace or add code.

Iam not strong in the coding area so will need clear instruction

I am on a shared hosting

Thanks in advance

Regards bruce

[Ernest MarcinkoKeymaster]

Hi!

I think I see why the website shifts 🙂 It’s actually a weird coincidence. Something besides the plugin adds an additional class to the document body, called “fixfixed”. This CSS class is also used by ajax search pro, but it has a different definition. The fix is very easy. Just use this CSS code:

.fixfixed {
    position: inherit !important;
}

You can either add this to the custom CSS section of your theme, or use the Theme Options -> Custom CSS panel on the search instance options.

As for the placement: It’s extremely hard to tell which file and where to exactly edit, as there are over 15 million different themes out there, and each one is using a different codebase. Therefore I would really love to give you clear step-by-step instructions, but it’s just simply not possible. It would require for me to know the source code of all the versions of all the themes out there.

Based on what I can see the current search bar is placed in a div container, possibly in the header.php file in your theme directory ( wp-content/themes/{your theme name}/ ). It’s most likely there, but it varies from theme to theme. I would look for this code fragment in the header.php file:

<div id="search-box">
     ......
</div>

or something very similar. Inbetween the div tags there is either a PHP function or more HTML code, I can’t tell from the page source, but it does not matter anyways.

After locating this fragment, I would try changing it to something like:

<div id="search-box">
     <?php echo do_shortcode('&#91;wpdreams_ajaxsearchpro id=1&#93;'); ?>
</div>

Make sure the id in the shortcode corresponds with the search ID you have created. If you created one, then it’s probably 1: https://i.imgur.com/B6sjrRh.png

Then save the file and see what happens. There is a good chance it’s still going to be misalignment or incorrect width, as the site header was probably built for that exact search form. Based on the first look, I would also use this custom CSS code on the search-box container to make sure the width is not exceeding 100%:

#search-box {
     max-width: 300px;
}

This is as much as I can do after the first look.

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

[brucewatsonParticipant]

Many thanks I was able to get the search bar to work

I have noticed two other issues you hopefully can help with?

firstly trying to load the website on my mobile phone the search is there but i can only put in one letter and the screen moves it is almost impossible to use.

The second issue is with https as soon as i do a search i lose the solid green lock. and it has your conection is not secure message

I use a plugin (SSL Insecure Content Fixer) with has sorted out mixed content issues i have had until now.

can you please advise me best course of action to fix these issues

thanks in advance

Bruce

[brucewatsonParticipant]

Hi the https issue seems to be fixed not sure what settings i changed but i deactivated and reactivated your plugin then did a database clean (Optimize Database after Deleting Revisions) as well as changing some of the compatibility settings like css compatibility.
hopefully this is the end of this issue
cheers

[Ernest MarcinkoKeymaster]

Hi!

Yes, that should fixed the https issue. The cause was the fact that when you save the search options, the CSS files are dynamically generated and the actual plugins_url() function result is used. At that time it returned the “http:” version. The site url was changed afterwards, but the stylesheets remained the old version. Once you de-activated the plugin these stylesheets are automatically re-generated. In case of any change it’s enough to save the search options, and the CSS files will be re-generated with the actual URL 🙂

What I noticed right now is that a blue hovering stuff appears when I focus the search input. It seems like the CSS fix I recommended is not sufficient. I’ve done some debugging and this worked for me:

.fixfixed {
    position: static !important;
}

I’ve also noticed an independent javascript error which blocks further JS execution in one of your files, namely: https://naturalhealthchoices.com.au/wp-content/plugins/social-marketing/js/twitter.js

The line twttr.events.bind(‘tweet’, wdsm_twitter_callback); is causing a fatal error, the console reports that the twttr variable is not defined:

Uncaught ReferenceError: twttr is not defined

I recommend changing that line to:

if (typeof twttr != "undefined")
    twttr.events.bind('tweet', wdsm_twitter_callback);

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

[brucewatsonParticipant]

Hi Again
I had issues after updating to the latest version of your plugin ( search field not showing)
Please find screen shot attached
I played around and loaded new template and some compatibility settings with no luck. so I have reverted to the old one for now. I’m wondering if there is some css you can suggest i can try on my testing site.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Based on the screenshot, I suspect browser or page cahe – since that looks like the default search style. Try updating by following the Safe Update guide.

After that, clear any cache you have activated and refresh the page with CTRL + R to make sure the browser cache is refreshed.

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

[brucewatsonParticipant]

Hi i have tried again to reinstall the update 4.6 on my live site today after updating to wp 4.4 I used the safe upgrade guide. I still have the same problem. ive cleared browser cache please help me sort this out I would really like to use your plugin.
you will notice by screen shots the search filter renders correctly. as the standard search doesn’t

Thanks

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

I’ve checked the source, you have an invalid HTML there, perhaps by accident. A div with id “search-box” is nested into another div with the same ID. It’s probably because of a copy/paste or something, but the inner “search-box” should not be there: https://i.imgur.com/YNo8EPr.png

It’s right around the ajax search pro shortcode. This might fix the problem, but I’m not sure.

To make sure the minimal width is not set to something very small, you can try the following custom CSS:

@media only screen and (min-width: 768px) {
    #search-box {
        min-width: 300px;
    }
}

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

[brucewatsonParticipant]

Hi Thanks Ernest
Seems to work ok now although the search box is full width in smaller screen phone ipad i moved the css code you gave me earlier max-width: 300px; and placed it under min-width: 300px;

is this correct?

@media only screen and (min-width: 768px) {
#search-box {
min-width: 300px;
max-width:300px;
}
}

im not sure how to fix the div search box nested below the div search box.
I did not know this before so i can’t say that it happened after the version update or not your recommendation to fix would be appreciated as you say it is not ok
thankyou

[Ernest MarcinkoKeymaster]

Hi!

Yes, that CSS looks correct to me.

To fix that problem, you will have to open the header file where you put the search shortcode in.
The faulty code should look something like:

<div id="search-box">
    <div id="search-box">
       .... some code is probably in here....
    </div>
</div>

and it should look something like:

<div id="search-box">
     .... some code is probably in here....
</div>

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

[Author]

Posts