I have a Phonegap 4.0 app in iOS with an <input />.
When I focus the <input />, the entire screen moves up, and does NOT resize. But I want the size of the screen to adjust to the new, smaller screen with keyboard.
Goal is to keep the header visible:
<header style="position:absolute; top:0: left:0; right:0; height: 30px;">
...
</header>
My current index.html viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0">
This has no effect:
<preference name="KeyboardShrinksView" value="false" />
Neither does adding height=device-height to viewport tag..
Change 'minimum-scale=1.0' to 'maximum-scale=1.0'. By using minimum-scale you are saying that the contents cannot resize any smaller, like when the keyboard comes up in your case.
Related
When I add audio tag to html and try to see it on IPhone 5 it has only half the size. How do I fix it?
<!DOCTYPE html>
<html>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
If I zoom in then it works. But not in the normal screen.
Wrong:
Expected:
If I add
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also show up properly but would become half height once zoomed out.
Also flipping screen horizontally makes it a little bit higher.
EDIT screen after #Romain suggestion:
You only need to expand your tag to full width of your container and adjust a minimum height that will suit all browsers
html
<!DOCTYPE html>
<html>
<body>
<div id="block"></div>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
CSS
audio {
width:100% !important;
min-height: 30px;
display:block;
}
#block {
height:100px;
width: 50px;
background: blue;
}
The issue is your audio tag is floating on the left (not big enough) and it is displayed under a web browser bar.
Here, I don't think the audio tag is the problem. Try to had another html element to review if the tag is well displayed.
I also had to set height:100px; on audio to get full play arrow height to show. It did move the control down in other browsers but I can live with a little white space above the control. Add this to css or to head of the page:
<style>
audio {height:100px;}
</style>
With latest Cordova on iOS 8.1, it seems I cannot prevent the keyboard to shrink the view height.
I've tried the following settings:
in my config.xml:
<preference name="KeyboardShrinksView" value="false" />
in the index.html viewport tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
or
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
or
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
None of these disabling the shrink behavior.
How could I prevent the keyboard from shrinking the view on iOS?
I'm experiencing a very different problem. I can't get cordova to resize the webview like it used to anymore ^^.
with regards to
<preference name="KeyboardShrinksView" value="false" />
This is disregarded on ios7 and higher in the org.apache.cordova.labs.keyboard plugin.
The code states:
// No-op on iOS7. It already resizes webview by default, and this plugin
// is causing layout issues
// with fixed position elements. We possibly should attempt to implement
// shrinkview = false on iOS7.
if (!IsAtLeastiOSVersion(#"7.0")) { ... }
I suspect the culprit/savior is in the meta tag. That's where I'm going to look.
Currently mine looks like this:
'<meta name="viewport" content="width=' + viewPortWidth + ', user-scalable=no, initial-scale=1, maximum-scale=1' + extra + '"/>'
where viewPortWidth is dependent on the device, in case of an iphone it's 320, and extra is target-densityDpi=device-dpi in case it's android
Hope it can help you a bit
I have been working on a jQueryMobile App wrapped in phonegap with fixed footer.
In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.
I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.
I have been trying the fixes mentioned in the below URL's, but did not help:
https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8
stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height
gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/
Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.
A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):
http://goo.gl/8RICNG
For more clarity, a part of the header section is pasted below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
And my App footer code is:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">
<div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>
Can any one please help me with a perfect work around as I am stuck with this issue?
Thanks in advance..
In Mainpage.xaml try changing the property
shell:SystemTray.IsVisible="True"
to
shell:SystemTray.IsVisible="False"
This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue
I use the 2.9.0 version of Phonegap and I want that when the keyboard appears my WebView shrinks like it's done in Android phonegap apps. I have footer and header elements in fixed position, and when the keyboard is open it causes trouble (the footer and header loose their fixed position state).
I think the KeyboardShrinksView settings could fix that, according to the phonegap documentation : http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS
But with a lot of try I'm not able to make it work, the WebView doesn't shrinks.
I was thinking maybe it can come from a conflict between others preferences set on my config.xml :
config.xml
<gap:platform name="ios" />
<gap:platform name="android" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="orientation" value="portrait" />
<preference name="KeyboardShrinksView" value="true" />
Or maybe it can come from meta tag definition, specially the viewport :
index.html
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Do you know why it's not working ? Or do you have a workaround for this ?
EDIT : I had seen that it changes something when KeyboardShrinksView=true, but when the keyboard is open, it's hidding the bottom of my content (including my footer and the field) instead of resizing my whole content. I expect it's placing my footer just at the top of the keyboard, am I right ?
Thank you for your help
Yeah - this is a pain to deal with right now. Currently there is no real fix to make things like they used to be in iOS. Personally, I currently juggle two different tags in my apps (one for iOS and one for Android) and it gets close to the old behavior on iOS. Here's what I use:
<!-- IOS --> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />`
<!-- ANDROID --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
My config.xml settings are what you'd expect:
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />
Here are a few links to keep an eye on and to keep bugging (i.e. requesting) that the Cordova folks finally fix it.
Issue CB-4862: https://issues.apache.org/jira/browse/CB-4862 (This is the core issue thread. It was originally closed but after a comment I made a while ago it was reopened)
Issue CB-5852: https://issues.apache.org/jira/browse/CB-5852 (This is where CB-4862 folks were told a possible fix might exist - but initial tests by devs show it's not really a solution sadly).
Hopefully these links will at least help get you up to date w/the latest info on the keyboardshrink related issues. If anyone else has leads/links on this please do share!
I fixed it by calling this code on every page change - :
$('input').unbind('focusout');
$(document).on('focusout', 'input', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 500);
});
Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..
Here is the situation:
If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.
The only change is adding the doctype to the top of the file and the icon flips from bars to plus.
Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results
Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#import url('include/jquery.mobile-1.3.2.min.css');
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" />
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="ui-body">
Test
</div>
</div>
</div>
</body>
</html>
EDIT: Same issue occurs with the GRID icon
This is just a typo. Replace
data-icon="Bars"
with
data-icon="bars"
And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/
Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/