Styling of Search box not adhering

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Styling of Search box not adhering

This topic contains 5 replies, has 2 voices, and was last updated by

 
Keymaster
7 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1330

    Participant

    One, I replaced the site search with Ajax Search Pro as you can see in the right side of the menu. It’s not adhering to the styles I setup in the option and the input box does not show text until after you type something and results- it’s tiny.

    Also, it’s positioned differently in different browsers. It’s below the blue menu bar or inside it but not positioned correctly. I’ve attached a screen shot of what it should look like. When you click the icon it pulls up the search box. This is how the old search worked.

    Those are the most import things, but less important is that I have a sticky menu bar and it works great in Chrome and Firefox, but doesn’t in Safari. If this can’t be helped, I’ll just disable the sticky feature, but thought I would ask.

    Thanks in advance,

    Isaiah

    #1343

    Hi!

    I’m not sure if by the time you have managed to solve the issue, but it looks ok now on my side. Sorry I couldn’t get to you sooner, I had 2 more tickets on hold 🙂

    Let me know!

    Best,
    Ernest Marcinko

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


    #1345

    Participant

    Ernest,

    No it’s not fixed, Sorry, I tried something different from when I first wrote you. The issue with the way I tried it was it took up so much room in my navigation (I want it to appear when you click the icon), and two it reacts weird with the responsiveness.

    I put it back to the original search, so you can see the way I would like it to be, but replaced with the new search pro plugin.

    Since you have access to the site you can put the shortcode in the header yourself, or I can do it real quick and send you another note?

    http://fairbanks.wpengine.com

    Thank you in advance,

    Isaiah

    Attachments:
    You must be logged in to view attached files.
    #1347

    Hi!

    The styling of the outlining div needed to be reduced from 360 px to 310 px in the template header.php file, now it fits.
    I also added a few lines after the wp_head() call, to make sure, that the window.resize event is called after the user clicks the search icon, so the text input of the ajax search fixes itself:

      <script>
        aspjQuery(document).ready(function(){
           aspjQuery('#NavSearchLink').click(function(){
               aspjQuery(window).resize();
           });
        });
      </script>

    Please backup the header.php file from your template in case you need to reinstall it, so the changes persist 🙂

    Best,
    Ernest Marcinko

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


    #1348

    Participant

    Ernest,

    Thank you so very much!

    Quick follow up, you might be able to point me in right direction – I understand that different browsers render things differently, but is there anyway to get rid of the round box around the search (and display font styling) in Safari so that it looks as sharp as it does in Chrome? screen shot attached.

    Lastly,

    Are you available for a job? Ultimately, I would like to create a search that looks like this: http://wpengine.com

    utilizing your search engine for my site. I like how big and bold it is and want to make search a big and fun part of the site. Love what you are doing! Thanks again.

    Attachments:
    You must be logged in to view attached files.
    #1350

    Hi!

    No problem at all. I think it’s caused by a browser styling attribute, but I think it’s possible to turn it off. Try to add these lines to the site’s main css file:

    input {
        -webkit-appearance: none !important;
        border-radius: 0 !important;
    }

    Here is an article about it: http://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

    Unfortunately I’m not available for a custom job, sorry 🙂 I wish I had more time.

    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.