Multiple Problem

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17940
    jh52847
    jh52847
    Participant

    Hi so I am having some problems using Ajax Search Pro

    Topic A. Ajax Search Pro Widget Width Responsive for main page and sidebar
    page url: https://www.hanjstar.com
    I want to use same widget in different area which are main page and sidebar on post page

    I like current width for sidebar but I want this to be long for my main page
    it solves the problem if I use just shortcode but I am using WPML duplicate page and updating this frequently so that every time I update my page, other page automatically displays this update. (So I have to stick to this wdget)
    So my point is I want this search widget to be responsive on both sidebar,main page or even anywhere.
    I tried to change:
    1. Compact layout final width to 200px but it didn’t work
    2. Theme option -> Search box width to 500% but it didn’t work

    Topic B: Search Result Count
    page url: https://www.hanjstar.com
    When I was using shortcode -> if I typed something like 원피스 on my Main Page it displayed more than 2 post per page,
    but after changing it to widget , it displays only 2 post per page.
    Is there anyway I can change this count to 4 or 8 ?
    and if possible I want to display only 2 while keeping 4 for desktop

    Thanks!

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

    Hi!

    A. You have a custom CSS that forces 20% width on the search box parent widget element: https://i.imgur.com/KDgtKlb.png

    I suggest either removing that, or using a custom CSS to change the min-width attribute of the search:

    #ajaxsearchprowidget-5 {
        min-width: 100% !important;
    }

    Please note, that this is not directly related to the plugin, it is only a suggestion.

    B. The column calculation depends on the seach final width, and on the initial width, that is defined on the back-end here: https://i.imgur.com/GFS80Dg.png

    Lower value = more columns, higher value = less columns.

    Once you fixed the width of the search bar, it will automatically adjust to the screen size, based on the defined results width.

    Best,
    Ernest Marcinko

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


    #17960
    jh52847
    jh52847
    Participant

    Thanks for reply
    your solution works perfectly fine on desktop
    but I got another problem.
    and my search width is different for desktop and mobile.
    Is there any way I can decrease mobile version ?
    it’s long even if I delete css.

    also I tried to make some border on http://www.hanjsar.com/ja
    it worked on desktop right away but not on mobile.
    Seems like it makes delay.
    I turned off caching in your plugin by default.
    by the time you see my website it can have border but I expect this problem in the future.
    Is there any way I can solve this problem?

    #17971
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Usually media queries within custom CSS are used to identify mobile screen sizes. You can define rules for these screen widths. For example, if the max screen width is 480px, then this rule will apply. It should be placed after the previous rule in the custom CSS section.

    @media (max-width: 480px) {
        #ajaxsearchprowidget-5 {
            min-width: 50% !important;
        }
    }

    You can change the screen size, and define multiple rules like this as well.

    The delay can be the browser cache, the plugin does not cache any of the files. Make sure to reload the browser by hitting CTRL + SHIFT + R buttons, it usually works.

    Best,
    Ernest Marcinko

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


    #17982
    jh52847
    jh52847
    Participant

    Hi I applied but it’s not working can you suggest other solution?

    #17986
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    First, make sure that the search width is not set to 500%, that is not recommended at all. I recommend using the default 100% instead.

    Then try these more generic rules instead. It will work with any search widget there.

    .AjaxSearchProWidget {
        min-width: 100% !important;
    }
    
    @media (max-width: 480px) {
        .AjaxSearchProWidget {
            min-width: 50% !important;
        }
    }

    Depending on your needs, you will have to adjust the min-width numbers.

    Best,
    Ernest Marcinko

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


    #17992
    jh52847
    jh52847
    Participant

    Thanks ! it worked on mobile as well. My width was 100%

    but lastly, I want to change sidebar width as well.

    If you see on this website.
    https://www.hanjstar.com/drivers-high-by-larc-en-ciel/
    sidebar search bar looks fine.
    but as soon as I scroll down.
    It become long.

    #18005
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    You are welcome!

    It looks like the sidebar becomes a fixed position, where the percentage width may not work. Try somethign like this:

    .asp_m_3 {
       width: inherit !important;
    }

    This way the search bar width should be the same as the container.

    Best,
    Ernest Marcinko

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


    #18014
    jh52847
    jh52847
    Participant

    Thanks it works but I just want to make sure this is final solution.
    because I still see something getting longer for a moment then comes back.
    This is perfectly fine with me but I just want to make sure that If you can suggest further so that it actually doesn’t change its shape.
    Link
    if not this is fine with me thanks!

    #18023
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Well, it looks like it happens, when it starts scrolling, the container width is higher initially, so the search ball follows that width, that causes the effect. I’m not sure if it is possible to eleminate it, but it could be possible to make it a bit less visible:

    .asp_m_3 {
       width: inherit !important;
       max-width: 330px !important;
    }
    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.