Mobile searchbar focus / shifting issue

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Mobile searchbar focus / shifting issue

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 year ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #34538
    itsjonesyy70
    itsjonesyy70
    Participant

    Hello,

    I am having an issue with the ajax search focus behavior on mobile. My mobile search bar appears in a lightbox, and will appear unfocused. When the user taps on it, it will focus, and it will move. When the user’s mobile keyboard opens & closes, the searchbar will move. If the user gets no results from the search (and suggestions appear), the bar will un-focus, and the search bar will move to another position as it is now unfocused.
    When the user types and gets results preview list below, the bar will unfocus after term is typed and the bar will then move to its original position (so it can’t even be seen behind the results preview list that has been generated by the search bar).

    My aim is to have a usable mobile search bar and I believe the issue is related to how the ajax search bar auto focuses / unfocuses on mobile, causing the bar to shift strangely when the mobile keyboard opens / closes. I need it to maintain a consistent position.

    I have provided a link for full admin access to my staging site. I can create a fresh staging site if anything breaks.

    Thanks!

    #34545
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Thank you for the details!

    I’m afraid this is not related to our plugin – I checked the source and debugged the styling, but the search styling does not change, neither does the position. It is caused by the conatiner (the lightbox search container element).
    It has some event handlers attached, which change the position of some of the items to fixed, and that causes the conflict. I assume there was a different search integrated to that box, specifically made for it, so it was working fine.

    Try these custom CSS to get around them:

    .mfp-wrap,
    div#search-lightbox,
    .searchform-wrapper,
    .mfp-container .mfp-content {
        position: static !important;
    }
    
    div#ajaxsearchpro1_2 {
        position: static !important;
        top: 0px;
    }
    
    .mfp-container div.mfp-content {
        position: relative !important;
        top: 0 !important;
        height: 100%;
        padding-top: 120px !important;
    }

    Please note that these may not work, as the issue is not originated from our plugin.

    If you want to auto focus the search when the magnifier icon is clicked, then try changing this configuration to:
    .header-search.header-search-lightbox

    Best,
    Ernest Marcinko

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


    #34558
    itsjonesyy70
    itsjonesyy70
    Participant

    Hi Ernest,

    Thanks for the response. I’m afraid the above CSS will not work – thank you for sending that code through. I’ve tested different variations of this previously, and have just tested yours too. It will either break the mobile menu (other content in the mfp container) or just not position properly.

    The auto focus of the search is helpful, thank you.
    I am wondering if there is any code possible to keep the mobile search focused constantly, regardless of the user action? I believe this could be a potential fix. It’s when the search bar loses focus that it will move strangely (When results are shown below / when ‘no results found’ is shown below the bar). If I can keep the bar focused constantly this should do the trick.

    Thanks again,

    Alex

    #34568
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I’m afraid there is no way to force the focus via a script – the mobile browser just takes control, and the user can close the mobile keyboard anytime.
    Are you sure the custom CSS is not working?
    I tried on a few devices, and it worked great without the jumping around: https://www.youtube.com/watch?v=ydn8gh4ga1g

    Best,
    Ernest Marcinko

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


    #34569
    itsjonesyy70
    itsjonesyy70
    Participant
    You cannot access this content.
    #34573
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I see. Well, the lightbox seems to reset each time the menu/icon is clicked, so you could add a script whenever the search icon is clicked, which adds a unique class name to the lightbox:

    (function($){
    	$('.header-search-lightbox').on('click', function(){
    		setTimeout(function(){
    			$('.mfp-wrap').addClass('has_search');
    		}, 200);
    	});
    })(jQuery);

    ..then use a modified custom CSS:

    .mfp-wrap.has_search,
    .has_search div#search-lightbox,
    .has_search .searchform-wrapper,
    .has_search .mfp-container .mfp-content {
        position: static !important;
    }
    
    div#ajaxsearchpro1_2 {
        position: static !important;
        top: 0px;
    }
    
    .has_search .mfp-container div.mfp-content {
        position: relative !important;
        top: 0 !important;
        height: 100%;
        padding-top: 120px !important;
    }

    It will target only when the container has that specific unique class name.

    Best,
    Ernest Marcinko

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


    #34582
    itsjonesyy70
    itsjonesyy70
    Participant

    Thanks for your time, this is working. Really appreciate you taking the time to help with something that is out of the plugin boundary.

    #34592
    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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.