Ajax Search Pro field keeps physically shrinking in length

[turner2fParticipant]

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.

[turner2fParticipant]

Admin section can be found at …

http://harrisfloorcovering.com/V3/wp-login.php?gate_keeper=1950

[turner2fParticipant]

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

No longer works in Internet Explorer 9 or FireFox 25.0.1

[turner2fParticipant]

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

[Ernest MarcinkoKeymaster]

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

[turner2fParticipant]

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.

[turner2fParticipant]

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 10 years, 4 months ago by  turner2f.
• This reply was modified 10 years, 4 months ago by  turner2f.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

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

[turner2fParticipant]

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 10 years, 4 months ago by  turner2f.
• This reply was modified 10 years, 4 months ago by  turner2f.
• This reply was modified 10 years, 4 months ago by  turner2f.

[Author]

Posts