When we click the search button the search box appears but as soon as we click the search input field and the keyboard on the phone appears the search input box hides again. I disable the user scalablity to as the page was zooming in when the input box was clicked but that doesn’t solve the issue either.
URL: http://www.fourhorsemen.in/
Try the search field in a mobile phone (I tested in iPhone)
Regards,
Adrian
1 answer
Hi adrianknight,
I have an update news for your ticket. To fix the issue, please follow these steps:
1. Go to appapp\design\frontend\gem\default\template\page\html
2. Open file header.phtml
3. Update code at the 54th to 104 line: change
var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-search, #jm-mycart");
if (detectmob()) {
inner_toggle.click(function () {
if (!$(this).children(".inner-toggle").hasClass("active")) {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$(this).children().addClass("active");
$(this).addClass("active");
if (!jQuery('#jmoverlay').length) {
jmoverlay = jQuery('<div id="jmoverlay" class="jmoverlay" style="opacity: 0 !important;"></div>');
jmoverlay.appendTo('#jm-wrapper');
jmoverlay.bind("click", function () {
inner_toggle.removeClass('active').children().removeClass("active");
jQuery(this).remove();
});
}
setupIscroll($(this));
} else {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$("#jmoverlay").remove();
}
});
to
var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-search, #jm-mycart");
if (detectmob()) {
var inner_toggle = $("#jm-quickaccess, #jm-setting, #jm-mycart");
inner_toggle.click(function () {
if (!$(this).children(".inner-toggle").hasClass("active")) {
inner_toggle.children().removeClass("active");
$('#jm-search').children().removeClass("active");
inner_toggle.removeClass("active");
$(this).children().addClass("active");
$(this).addClass("active");
if (!jQuery('#jmoverlay').length) {
jmoverlay = jQuery('<div id="jmoverlay" class="jmoverlay" style="opacity: 0 !important;"></div>');
jmoverlay.appendTo('#jm-wrapper');
jmoverlay.bind("click", function () {
inner_toggle.removeClass('active').children().removeClass("active");
jQuery(this).remove();
});
}
setupIscroll($(this));
} else {
inner_toggle.children().removeClass("active");
inner_toggle.removeClass("active");
$("#jmoverlay").remove();
}
});
$('#jm-search .btn-toggle').click(function (){
if(!$(this).hasClass("active")) {
inner_toggle.children().removeClass("active");
$(this).parent().children().addClass("active");
}else{
$(this).parent().children().removeClass("active");
$("#jmoverlay").remove();
}
});
4. Click [Save] button
Have a look and let’s me know how it goes.
Best regards,
Kan