COMPACT SEARCH BAR WIDTH ISSUE

Home Forums Product Support Forums Ajax Search Pro for WordPress Support COMPACT SEARCH BAR WIDTH ISSUE

This topic contains 13 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 3 years, 1 month ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #22949
    cgold
    cgold
    Participant

    Hi Guys,

    I have added the shortcode to our menu which uses Shivnav plugin.

    All looks good however the search box does get fully expanded when you click on it. It is set to 100%

    Screenshots are attached.

    Thanks
    Colin

    Attachments:
    You must be logged in to view attached files.
    #22954
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Colin,

    It looks like that the container element has an automatic width set, so it expands to a minimum value. Instead of percentage values, try using pixel values, that will do the trick.

    Best,
    Ernest Marcinko

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


    #22957
    cgold
    cgold
    Participant

    Hi Ernest

    That worked.

    I have another question.

    Is this the correct class name to target the h3 title of the verticle dropdown

    div.asp_r.asp_r_1 .results .item .asp_content h3

    Thanks
    Colin

    #22958
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Colin,

    Yes, that seems correct to me.

    Best,
    Ernest Marcinko

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


    #22966
    cgold
    cgold
    Participant

    Hi Ernest

    What would be the best way to show all results for two queries below

    Smart watches
    Smartwatches

    Currently, search results are displayed separately for both ways of writing this word.

    Thanks
    Colin

    #22968
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Colin,

    Well, probably using the additional keywords feature is a good way. You can add these keywords to the items where they are missing.

    Best,
    Ernest Marcinko

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


    #22980
    cgold
    cgold
    Participant

    Hi Ernest,

    I have another issue.

    For mobile, it appears Ajax Seach Pro is adding white space under our menu header. How can we remove this? Have attached screenshot.

    Also, How can we limit the amount of posts showing on mobile compared to desktop? We only want to show 5 posts on mobile in the dropdown after you search. Screenshot attached.

    Thanks
    Colin

    Attachments:
    You must be logged in to view attached files.
    #22997
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    I am not sure if you resolved the white space issue, but it looks okay to me at the moment: https://i.imgur.com/WbYIVr6.png
    Let me know if it happens on a specific device.

    To resolve the height issue on mobile devices, try this custom CSS:

    @media only screen and (max-width: 480px) {
        .asp_r .results {
            max-height: 300px !important;
        }
    }
    Best,
    Ernest Marcinko

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


    #23049
    cgold
    cgold
    Participant

    Hi Ernest

    This fix this issue…thanks

    I have one more question for now.

    When you enable autocomplete on mobile the autocomplete text sits behind the written text and is hard to read the text

    I have attached a screenshot for your reference.

    Thanks
    Colin

    Attachments:
    You must be logged in to view attached files.
    #23052
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    It looks like maybe a 1px misalignment for some reason. Try this custom CSS rule, it should align it 1px lower:

    @media only screen and (max-width: 480px) {
       div.asp_m.asp_m_1 .probox .proinput input.autocomplete {
           margin-top: -33px !important;
       }
    }
    Best,
    Ernest Marcinko

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


    #23068
    cgold
    cgold
    Participant

    Hi Ernets,

    Thanks for your help all looks great.

    last things I need to ask is how to make the settings menu icon the same size as the search box.

    Screenshot attached.

    Thanks
    Colin

    Attachments:
    You must be logged in to view attached files.
    #23078
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Colin,

    It looks like it’s only a black border/box shadow, check if the border and the box shadow of the settings icon is set to none: https://i.imgur.com/5ZKhpSV.png
    Those should do the trick. If not, then use this custom CSS:

    .prosettings {
        background: white  !important;
    }
    
    .prosettings svg {
        fill: black !important;
    }
    Best,
    Ernest Marcinko

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


    #23107
    cgold
    cgold
    Participant

    Thanks Ernest

    I wanted to ask you about the option of loading the css files aync.

    Do you think its required as we used Cloudflare Rocket Loader.

    Thanks
    Colin

    #23116
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Colin,

    I don’t think it’s neccessary if you are using the Rocket Loader, it should take care of that.

    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.