Search field no longer stretches to 100% width

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Search field no longer stretches to 100% width

This topic contains 6 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35961
    philip29
    philip29
    Participant

    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.
    #35965
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #36216
    philip29
    philip29
    Participant

    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 4 months, 2 weeks ago by philip29 philip29.
    #36217
    philip29
    philip29
    Participant

    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.

    #36218
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #36227
    philip29
    philip29
    Participant

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

    #36230
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.