I'm currently developing a site where I hide the header in mobile devices, it can be opened using a anchor with a jquery slideToggle function. Great stuff. Inside the header there's a search field and some other buttons.
However, when I focus the input on android and the virtual keyboard opens up my header closes. hiding the search field and everything else in it.
I have come to the conclusion that it is the keyboard that toggles this "bug".
Have anyone ever seen this before? I have no clue what I'm even looking for. Bloody android! :)
Thanks,
Robin
var searchToggle = $('.search-toggle'),
subHeader = $('.sub-header');
searchToggle.click(function(){
subHeader.slideToggle();
});
Problem solved. Found out that when the keyboard opens up the window trigger a resize function I used.
Related
I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?
I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.
I have an application using jQuery Mobile.
When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.
When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.
I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.
Do you already seen this kind of error ?
Thanks by advance
I created a demo for you, as an alternative
I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.
Demo
https://jsfiddle.net/fyom081o/
Code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});
Please see the answer from when I raised this same question...
Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
It requires a lot of userAgent sniffing to make it work properly
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue
I have clicked many buttons without ever hitting a problem like this. I'm using VB 2010. If I click on the control programmatically or manually, the screen flashes like it is just refreshing. However, if I open a separate IE window, I can click the button and it advances to another screen as expected. I have researched this on other sites and have found one suggestion that the control is using a different version than the full version, which is IE 8 in my case. This still doesn't provide a solution. Can anyone please help? Here is the code which clicks the button as well as the html of the button.
WebBrowser1.Document.All("posForm:estimate").InvokeMember("click")
<button onclick="validateForEstimate(this, 'NonITS');" type="button" name="getestiamte"></button>
Maybe try the Microsoft Browser go to your toolbox right click and click choose items then go to COM components and use the filter to find Microsoft browser then check mark it. Add it to your form and done.
I am creating hybrid application with help of phone gap which supports in iPad.The iPad version is 6.1 . My issue is Whenever i tried to enter values in fields using default iPad keyboard, my web page is moving little bit upwards then if i click any button in application page with out manually closing the keyboard my page is messing up.
What i tried is when ever i click my page button while keyboard is opening i just fired window.scrollTo(0,0).But in some scenarios this fix is not helping.So please any one help out to resolve this issue.How can i hide the keyboard by code or its great if any one give other ideas using HTML5..If Thanks in advance
I have a form within an iframe on a website that I am testing on iPad. It seems that the touch events do not work on the inputs with type "text" or textarea elements. Swiping or touching does nothing on those areas and the keyboard does not pop up. The combo box (select) elements I can interact with just fine. Is anyone else having this problem?
I have no issues on iPad iOS 4.3 only on iPad iOS 5. The markup and styling are pretty standard, but if no one else is experiencing this issue I can post the code. The only unique element that I can think of is that all of the markup is loaded dynamically using jQuery tmpl.
I have only seen documentation online regarding scrolling of textareas but this seems to be a separate issue.
Correction *
I just hit the page directly (outside of the iframe) and am still having the same problem. So has anyone seen this behavior before? Is it due to strange CSS styling? Z-indexing?
OKAY GOT IT! So I noticed that click events were registering but default drag behavior was not. I also remembered that I had implemented a jquery ui extension for draggable behavior that hooked touch events into their click and mousemove event handling. That was the culprit. I removed that extension and added this instead : github.com/furf/jquery-ui-touch-punch This works on both iOS 4.3 and iOS 5.1
I guess that has to be a bug in iOS...
Or could you post a link to what you have made?
I could test it on my iPod Touch...
I've had this problem for days now, and from googling around, most of the internet has too. But none of the posts contained an answer. This is the solution that worked for me. It's based on https://gist.github.com/tamarasaurus/dcf2d0331043586421f3. Hopefully this will help people in the future, or at least point them in the right direction.
document.addEventListener('keydown', function(e) {
window.focus();
});
document.addEventListener('touchend', function(e) {
window.focus();
});