Mobile searchbar focus / shifting issue

[itsjonesyy70Participant]

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!

[Ernest MarcinkoKeymaster]

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

[itsjonesyy70Participant]

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

[Ernest MarcinkoKeymaster]

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

[itsjonesyy70Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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

[itsjonesyy70Participant]

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

[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