This is a simple form in my application.When trying to enter user details in the form android key board hides the email field and mobile no field.I cant scroll the page upwards.Please suggest me a solution
<ion-content>
<form novalidate="novalidate" on-valid-submit="saveUserDetails()">
<div class="list card">
<label class="item item-input validated">
<span class="input-label">First Name</span>
<input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
</label>
<label class="item item-input validated">
<span class="input-label">Last Name</span>
<input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
</label>
<label class="item item-input validated">
<span class="input-label">Email</span>
<input type="email" ng-model="user.email" required="required" name="email" class="textclr">
<i class="icon ion-alert-circled error col col-10"></i>
</label>
<label class="item item-input validated">
<span class="input-label">Mobile</span>
<input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive activated">
Save user
</button>
</div>
</form>
<ion-content>
In your app.js file, add the following line of text. I have added this code to a function called “run” in app.js
ionic.Platform.isFullScreen = true;
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
ionic.Platform.isFullScreen = true;
});
})
Step 2 is to include the ionic keyboard plugin in your phonegap config.xml file. Here is the line of code you need to include:
<gap:plugin name="com.ionic.keyboard" />
You can use the ion-scroll-delegate to manually scroll up on keyboard show. For example:
angular.module('MyApp')
.run([
'$rootScope',
'$ionicPlatform',
'$window',
function(
'$ionicPlatform',
'$rootScope',
'$window') {
$ionicPlatform.ready().then(function() {
function keyboardHandler(event) {
$rootScope.$broadcast(event);
}
$window.addEventListener('native.keyboardshow', keyboardHandler('native.keyboardshow'));
$window.addEventListener('native.keyboardhide', keyboardHandler('native.keyboardhide'));
});
}
])
.controller('formCtrl', [
'$ionicScrollDelegate',
'$rootScope',
function(
$ionicScrollDelegate,
$rootScope) {
var scroller = $ionicScrollDelegate.getByHandle('my-form');
$rootScope.on('native.keyboardshow', function(event, data) {
scroller.scrollBottom(); //resize() will work too.
});
$rootScope.on('native.keyboardhide', function(event, data) {
scroller.scrollTop(); //resize() works here as well
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-content delegate-handle="my-form">
<form novalidate="novalidate" on-valid-submit="saveUserDetails()">
<div class="list card">
<label class="item item-input validated">
<span class="input-label">First Name</span>
<input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
</label>
<label class="item item-input validated">
<span class="input-label">Last Name</span>
<input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
</label>
<label class="item item-input validated">
<span class="input-label">Email</span>
<input type="email" ng-model="user.email" required="required" name="email" class="textclr">
<i class="icon ion-alert-circled error col col-10"></i>
</label>
<label class="item item-input validated">
<span class="input-label">Mobile</span>
<input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive activated">
Save user
</button>
</div>
</form>
<ion-content>
You'll need to have the keyboard plugin installed: