Search field no longer stretches to 100% width

[philip29Participant]

Hello.

The last few updates to Ajax Search Pro have broken the search field styling on our site. It no longer stretches to 100% width despite being set to 100% in the ASP settings (it behaves as though display:block were changed to display:inline). I have attached a screenshot of the theme settings. We’re using the ‘Plain square horizontal’ theme.

I first noticed this after updating to 4.21.7. Do you know if there were any changes to CSS that could have caused the issue? We are rolling back to our last known-good version (4.21.5) until this can be sorted out.

Thanks

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

It should not be an issue, I double checked, and the width is applied correctly within the latest release for sure. There was a container element added to the search bar, so the only thing that could cause this is 3rd party CSS overriding the width.
If you want, I can check it for you directly.

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

[philip29Participant]

Hello. Sorry for the late follow up, and happy new year.

Digging further into the code, the issue is definitely caused by ASP generating a CSS class:
.asp_w_container{width:200px}

Inspecting the elements in Chrome reveals the normal 100% width is being overridden by this CSS statement.

We don’t have any ASP search fields set to that dimension, and the search field used to be fine prior to 4.21.7, so there must be something going on in ASP.

For now we have resolved the issue by adding custom CSS via the ASP Custom CSS field:
.asp_w_container { width: 100%!important; }

Thanks

• This reply was modified 2 years, 3 months ago by  philip29.

[philip29Participant]

I think we may have stumbled onto the cause.

We have four ASP searches. Two are constrained to 200px width. Two were set to default width (no width specified) which resulted in 100% width. Before the recent ASP updates, the widths of the different ASP searches were respected. After the update, the width of the 200px search appears to have been set globally via .asp_w_container{width:200px}, causing all four ASP searches to be constrained to 200px.

I’m guessing the old code properly constrained the CSS settings to each ASP search, but the new code inadvertently broke the constraints. The way to test would be to create a site/page with multiple searches, set to different sizes.

[Ernest MarcinkoKeymaster]

You are right, my mistake there. The ID number is missing from the declaration, and when I tested with multiple search bars, the 100% width was still apparently working, because only the last instance was set to a different width.

My apologies, I will make sure to fix that in the upcoming release.

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

[philip29Participant]

Happy to help sort it out. Thanks for the assist and for the great plugin

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts