I developed an app using Ionic and I need to hide the ios keyboard by clicking the button. I installed the plugin ionic keyboard:
cordova plugin add ionic-plugin-keyboard
I used this command and did not work:
cordova.plugins.Keyboard.close();
I am using this version of the Ionic with real device ios 8.
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
I added this to config.xml in addition to your command and it worked
<feature name="Keyboard">
<param name="ios-package" onload="true" value="IonicKeyboard" />
</feature>
In your app.js
Change this line
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
to
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
This will show the Accessory Bar of the keyboard with a "done" button on it.
You can close the keyboard more natively.
Hope it helps.
Related
I'm working on a mobile app using Phonegap/Cordova.
I built the ipa file using Phonegap Build and installed it on my iPhone.
I noticed when I scroll up or down at the edges of the view (like iOS bounce scrolling), the whole application view scrolls down (or up) and a gray background color appears.
I tried finding if there's a CSS code for that, but no luck.
I'm guessing maybe its something related to view-port.
Things to Consider:
- I'm using Framework7 v3
- PhoneGap Build cli-6.5.0
- iPhone 6S Plus
Screenshots of the issue:
What can be done to fix this bug?
Add the following to to your config.xml and then run cordova prepare:
<platform name="ios">
<preference name="DisallowOverscroll" value="true" />
<preference name="UIWebViewBounce" value="false" />
</platform>
I'm submitting cordova build to android and ios.. unfortunately on ios, navbar falls down in every menu.
White space on top
Navbar pushed down and not sticking to top when scrolling
I'm using node.js v8.11.2, cordova 8.0.0, 9.0 ios deployment target and i've tried in every iphone, navbar keeps falls down.
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent"/>
I also read some post about IOS status bar problem and tried to add some code above to config.xml and still not working as expected.
Isn’t it because on top of iOS displays are system info data (time, Wi-Fi etc.). So app is basically pushed down, so best way for me was specify “StatusBarBackgroundColor” to correspond with your navbar.
Steve
I have a Cordova iPhone app, which uses the statusbar plugin. The status bar's background is set to black, and the text used to be white. But since upgrading the plugin from version 0.1.3 to 0.1.8, the text is now black.
Is it possible to get the old behavior back, or to specify the text color?
Information for debugging:
Using Cordova 3.6.3 and statusbar plugin 0.1.8.
I see this behavior on iOS 8 and 7.
The iOS project has the following configs:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
I'm using Xcode 6.0.1, with iOS SDK 8.0. In Xcode, "Hide status bar" is unchecked, and "Status Bar Style" is set to Default (but the same thing happens when I set it to Light).
The JavaScript StatusBar.isVisible returns true, and if I call StatusBar.backgroundColorByHexString("#FFF"), the background lightens, so the black text becomes visible.
This wasn't clear from the documentation, but there's a StatusBarStyle preference, and even if it's not present, it seems to override "Status Bar Style" from Xcode's project settings. So setting this in Cordova's config.xml fixed the problem:
<preference name="StatusBarStyle" value="lightcontent" />
I stumbled upon this tool that let's you toggle the setting for the status bar plugin and copy and paste in the preferences to config.xml. It's just what I needed! Hopefully helps others:
http://hollyschinsky.github.io/phonegap-workshop/develop/status-bar-handling.html
I'm updating my Cordova-based application for iOS 8. I notice an issue with the status bar.
The status bar is positioned correctly after the first launch. But if I close the application and open it again, the status bar dissappears, so I have a blank gap of 20px in the top of my app screen.
What I use in my code for the status bar is :
if ( mobileOS == 'iOS' && Number( mobileOSver.charAt(0) ) >= 7 ) {
document.getElementsByTagName('body')[0].className+=' fix-ios-7-statusbar';
}
The class fix-ios-7-statusbar simply adds a padding-top:20px to the header. This works in iOS 7 very well, but in iOS 8 I have an issue with the status bar that is hidden if I close the app.
Please help me.
I use the statusbar plugin. There were issues in iOS8 (see here), but the latest git commit fixed those for me. Give it a try.
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git#5658e7548c813bf7d6102eea4eaa7726b727b18e
My config.xml has this:
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#9BB06B" />
I'm having a problem overriding Cordova's defaults when writing an app.
I'm writing an iOS app using the Cordova (formerly PhoneGap) framework and Xcode. Cordova lets me add a splash screen for the project by just dragging and dropping it in under the info tab for my project in Xcode. This part works fine, but there is a default loading-indicator gif running over the top of the splash image (I'm not sure whether it's from Xcode or from Cordova).
How can I remove the loading-indicator image?
You can remove the loading spinner in Cordova.plist. Set ShowSplashScreenSpinner to false.
Update:
In Cordova 3.0+ adding <preference name="ShowSplashScreenSpinner" value="false" /> to your config.xml will accomplish the same goal.
I just removed the Launch images source and set the launch screen file to mainviewcontroller
Go to General Setting -> at bottom side Launch images resource and launch screen setting is available
If you have an IOS device i have a working method that you can use, it solved my problem when compiling for IOS. (Firstly i want to say you need to add an icon and splash in the correct folders or else Cordova will their default ones for you and also make sure that they are large enough so that the resources can be generated accordingly):
Remove the SplashScreen plugin provided using
cordova plugin rm cordova-plugin-splashscreen
Place your icon in the resources/ios/ folder and name it
icon.png
Go to the route of your directory and add your splash image (make sure that splash.png is 2800px * 2800px)
splash.png
Remove the ios platform if you installed it already and then re add it
ionic cordova platform rm ios
ionic cordova platform add ios
5.Run the following command to generate your icon
ionic cordova resources ios --icon
if building for android
ionic cordova resources android --icon
6.Add the following lines to your config.xml
<preference name="SplashScreen" value="none" />
<preference name="SplashScreenDelay" value="0" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
This should solve the default icon and remove the splash screen which Cordova adds to the IOS project by default. I hope it helps!