Search bar format isn't behaving like it used to

[Paul Ogle Jr.Participant]

Ok so for some reason my search function doesn’t look correct anymore. I tried to adjust some settings in the back end but that didn’t seem to do anything. What’s really weird is that the search function seems to look and work fine in the staging copy (I use siteground.com) see here: staging1.activelogix.com however when I push the site to live, the search block starts doing weird things. The placeholder text is offset, it only wants to have the search field that you type in under it and it will cause the buttons at the far right end of the box to go out of the search frame.

on live site: https://www.screencast.com/t/hDLijBUq
on staging site: https://www.screencast.com/t/MtMNualIS

I don’t understand why things would change between the staging site and live site if nothing else changes.

[Paul Ogle Jr.Participant]

I should add the staging url is staging1.activelogix.com if you want to check that out

[Ernest MarcinkoKeymaster]

Hi Paul,

The issue is caused by some sort of custom script, that seemingly changes the input placeholders (the ‘Search for products..’) text to labels. It simply adds a label element before the search input, and removes the placeholder attribute.
I’m guessing this might be some sort of theme script or maybe a widget script of some sort. There might be a minor difference between the staging and the live configuration somewhere, as I don’t see this there.
Staging source: https://i.imgur.com/NcFiZUC.jpg
vs. live source: https://i.imgur.com/4D8zlbi.jpg

The source marked red is not part of the search output, it is placed there by a 3rd party script. Unfortunately I don’t know which is it. I have tried to run a comparision of staging and live source, but the scripts are minified so there is no way for me to figure it out.

Anyways, try to check the configuration, there might be some difference.
If you can’t find it, then I have made a quick custom script and a custom CSS that may help

.proinput form label {
    display: none !important;
}

Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!

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

[Paul Ogle Jr.Participant]

thanks for your help!

[Author]

Posts