Ajax Search Pro field keeps physically shrinking in length

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Ajax Search Pro field keeps physically shrinking in length

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #842
    turner2f
    turner2f
    Participant

    Version 1.8 of the plugin was working fine.

    But for reasons completely unknown, my Ajax Search Pro field physically shrinks in length whenever a search inquiry is made.

    Secondly, I noticed that the spinning “Loading Image” and the “Setting Image” icons do not show up anymore.

    ============================

    1) I temporarily deactivated all the plugins

    2) I temporarily removed all custom CSS

    3) Tested the site in a different browser.

    Nothing resolved the issue.

    ============================

    Attached to this ticket is a Zip file of my Ajax Search Pro plugin for you to examine.

    ============================

    I have submitted all access info you require.

    Thanks for your assist in this matter.

    #843
    turner2f
    turner2f
    Participant
    #844
    turner2f
    turner2f
    Participant

    Seems to only work on Phones, Tablets, Safari Browser, Google Chrome Browser.

    No longer works in Internet Explorer 9 or FireFox 25.0.1

    #845
    turner2f
    turner2f
    Participant

    OK.

    I reinstalled the plugin, and it is working much better.

    But it still shrinks just not as much as it did before.

    Look forward to your assist

    ================================

    I am reattaching the UN-corrupted plugin in a zip file

    #847
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    I couldn’t find the cause of the issue, but I found a way to fix it. The container element of the search widget shrinks by 8 pixels when the search query is made. The initial size of this container is 486 pixels. Anyways, all you need to do is add the following lines of css into any css file that is loaded on your website (I would recommend a css file from the template):

    #ajaxsearchprowidget-4 {
      width: 486px !important;
    }

    I didn’t want to change anything on the backend, let me know if you need any more assistance!

    Best,
    Ernest Marcinko

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


    #849
    turner2f
    turner2f
    Participant

    Thank you very much.

    I think that fixed the issue.

    I will let you know if I run into anything else.

    Thanks again for your assistance.

    #850
    turner2f
    turner2f
    Participant

    Ok.

    I had to do a little adjustment to the CSS you submitted.

    Because at 486px the search field would run off the edge of a vertically -held mobile phone device.

    So I had to reduce it down to 265px

    ==========================

    ajaxsearchprowidget-4 {
      width: 265px !important;  /* Was originally 486px */
    }

    ==========================

    So everything appears to be fine.

    There is just one request….

    How do I get the Search field to be CENTERED on a mobile phone device that is being held horizontally ( in “landscape” ) ?

    Please see the attached screenshot image from my Mobile phone.

    ==========================

    Thanks in advance.

    Look forward to your reply.

    • This reply was modified 8 years, 8 months ago by turner2f turner2f.
    • This reply was modified 8 years, 8 months ago by turner2f turner2f.
    Attachments:
    You must be logged in to view attached files.
    #854
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    In this case, you can use the @media query css selectors. These will help you to determine the screen width aka. separate the mobile phone width from desktop. In this case you can change the width of the search + add any other rules you want. I guess the text by the search and the search is in a floating div element, which instead of making new lines, they are placed next to each other. To sum up everything, you can use something like this:

    /* Regular pc & others */
    #ajaxsearchprowidget-4 {
      width: 486px !important;
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-device-width : 350px) 
    and (max-device-width : 600px) {
      #ajaxsearchprowidget-4 {
        width: 265px !important;  /* Was originally 486px */
        float: none;
        margin: 0 auto;
      }
    }

    The “float: none;” property should place the search in a new line and the “margin: 0 auto;” should place it to the middle. With this code you can have different search width depending on the screen size. Please note, that I can’t test these codes, I’m just hoping it helps.

    Best,
    Ernest Marcinko

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


    #855
    turner2f
    turner2f
    Participant

    Awesome! Awesome! Awesome!

    I configured the CSS code so that it would work on PC’S, Popular Tablets and Phones.

    You might want to consider posting this on your forum or on your CodeCanyon support page.

    I have an iPad 2.

    1) If you have an iPad 3, 4, Air, or iPad Mini, please let me know if the Search field is lined up with the navigation links when the tablet is held in landscape ( IE – wide ) position.

    2) What would be the proper CSS code for an iPad Mini ?

    ================================

    /* This keeps the Search field from shrinking upon each inquiry made   */
    
    /* Regular pc & others */
    #ajaxsearchprowidget-4 {
      width: 265px !important;
     float: right  !important;
    }
     
    /* Search field width on Smartphones (Held vertically) ----------- */
    @media only screen
    and (min-device-width : 350px)
    and (max-device-width : 600px) {
      #ajaxsearchprowidget-4 {
        width: 320px !important;  /* Was originally 486px */
        float: none  !important;
        margin: 0 auto;
      }
    }
    
    
    /* Search field width on Smartphones (Held horizontally) ----------- */
    @media only screen
    and (min-device-width : 550px)
    and (max-device-width : 800px) {
      #ajaxsearchprowidget-4 {
        width: 420px !important;  /* Was originally 486px */
        float: none  !important;
        margin: 0 auto;
      }
    }
    
    
    /* Search field width on iPad 2 and iPad Mini Tablets (Held horizontally) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
      #ajaxsearchprowidget-4 {
        width: 265px !important;  /* Was originally 486px */
        float: none  !important;
        margin: 0 auto;
      }
    }
    
    
    
    /* Search field width on iPads 3, 4, iPad Mini w. Retina, and Air Tablets (Held horizontally) ------*/
    @media only screen
    and (min-device-width : 1536px)
    and (max-device-width : 2048px) {
      #ajaxsearchprowidget-4 {
        width: 265px !important;  /* Was originally 486px */
        float: none  !important;
        margin: 0 auto;
      }
    }
    

    ===================================

    Look forward to your reply.

    • This reply was modified 8 years, 8 months ago by turner2f turner2f.
    • This reply was modified 8 years, 8 months ago by turner2f turner2f.
    • This reply was modified 8 years, 8 months ago by turner2f turner2f.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.