I have a form with ten fields with a fixed header and a scroll on the bottom.
I found a method that works using the scrolls' scroll = 'true' "provided by Ionic but there is currently a bug when the keyboard is opened and then closed. The closure impacts the object "scroll" and makes any use of ionic scroll inoperative on the site
Page : form.html
<ion-header-bar align-title="center" style = "background-color:transparent !important;background-image: none;border-bottom: none;border: 0px !important; top:2%;">
<div ng-click="previousButton()" class = "backButtonImg"><img src="img/connexion.png" class="burger_icon"><i class = "backTitle">Retour</i></div>
<buttons class = "logoHome">
<a ng-click = "logoClick()" class="button button-clear" style="position: absolute;top: 0;right: 0;left: 0;margin: 0 50px;min-width: 30px;height: 43px;">
<img src="img/1.svg" width="73" height="18" style = "margin-top: 15px;">
</a>
</buttons>
</ion-header-bar>
<div class = "registerHeader" >
<div class="inside">
<div class="title">
<h2>{{'CREEZ_VOTRE_COMPTE' | translate}}</h2>
<p class="subtitle"><i style = "color : #c1002b">*</i>Champs obligatoires</p>
</div>
</div>
</div>
<ion-content id = "registerScrollT" class="register" has-header="false" scroll="true" style = "overflow: scroll !important; height:{{registerHeight}};">
<i class = "rightInputStyle" ng-if = "showrightInput == false">Votre email *</i>
</label>
</div>
<label class="{{user.missingEmail}}" ng-if = "user.missingEmail == 'red'">
<input type="text" placeholder="Renseignez votre email" ng-model="user.email" class = "item-input">
</label>
<hr ng-if = "user.missingEmail != 'red'">
<hr class = "redHr" ng-if = "user.missingEmail == 'red'">
<label class="{{user.missingPassword}} item-input" ng-if = "user.missingPassword != 'red'" id="password">
<input type="password" placeholder="Votre mot de passe *" ng-model="user.password" ng-change="changePassword()" ng-click="showPasswordMessage()" id = "messagePassword">
<i class = "rightMessagePassword" ng-if = "showMessagePassword == true">de 6 à 20 caractères *</i>
</label>
<label class="{{user.missingPassword}}" ng-if = "user.missingPassword == 'red'">
<input type="password" placeholder="Au moins une lettre et un chiffre" ng-model="user.password" class = "item-input">
</label>
<hr ng-if = "user.missingEmail != 'red'">
<hr class = "redHr" ng-if = "user.missingEmail == 'red'">
<div class = "gender">
<label class="radiotab">
<input type="radio" name="radiotab" value="Mrs." ng-model="user.salutation" checked="true"/>
</label>
<label class="radiotab rightRadio">
<input type="radio" name="radiotab" value="Mr." ng-model="user.salutation"/>
</label>
</div>
<hr>
<label class="item-input">
<input type="text" placeholder="Votre prénom" ng-model="user.firstName" ng-change = "change('firstName')" id = "formRegister">
<i class = "rightInputStyle" ng-if = "showFirstName == false" >Votre prénom</i>
</label>
<hr>
<label class="item-input" id="password">
<input type="text" placeholder="Votre nom" ng-model="user.lastName" ng-change = "change('lastName')" id = "formRegister"><i class = "rightInputStyle" ng-if = "showLastName == false">Votre nom</i>
</label>
<hr>
<div style = "position: relative; widows: 100%; width:100%">
<label class="item-input" ng-if = "user.missingPhone != 'red'">
<input type="tel" placeholder="Votre numéro de téléphone" ng-model="user.phone" ng-change = "change('phone')" id = "formRegister" ng-click="onClick()" class="emailRegister" maxlength="10" ><i class = "rightInputStyle" ng-if = "showPhone == false">téléphone</i>
</label>
</div>
<hr class = "redHr" ng-if = "user.missingPhone == 'red'">
<label class="item-input" ng-if = "user.missingBirthday != 'red'">
<input ng-model="user.personbirthdate" name="date" type="text" onfocus="(this.type='date')" placeholder="Votre date de naissance jj/mm/aaaa">
</label>
<label class="item-input {{user.missingBirthday}}" ng-if = "user.missingBirthday == 'red'" style = "background:#f1ced3">
<input ng-model="user.personbirthdate" name="date" type="text" onfocus="(this.type='date')" id="date" placeholder="Renseignez votre date de naissance"><img src = "/img/Info.svg" width = "20px" class = "ImgErrorRegisterDate">
</label>
<hr ng-if = "user.missingBirthday != 'red'">
<hr class = "redHr" ng-if = "user.missingBirthday == 'red'">
<div style = "position: relative; widows: 100%; width:100%">
<label class="item-input" ng-if = "user.missingPostalCode != 'red'">
<input type="tel" placeholder="Votre code postal" ng-model="user.postalcode" ng-change = "change('postalcode')" id = "formRegister" ng-click="onClick()" class="emailRegister" maxlength="5"><i class = "rightInputStyle" ng-if = "showPostalcode == false" >Code postal</i>
</label>
</div>
<label class="{{user.missingPostalCode}}" ng-if = "user.missingPostalCode == 'red'">
<input type="tel" placeholder="Renseignez votre code postal" ng-model="user.postalcode" class = "item-input" maxlength="5"><img src = "/img/Info.svg" width = "20px" class = "ImgErrorRegister" >
</label>
<hr ng-if = "user.missingPostalCode != 'red'">
<hr class = "redHr" ng-if = "user.missingPostalCode == 'red'">
<div class = "registerButton">
<button ng-click = "register()" class = "valider">valider</button>
</div>
+*
I add this in app.js file :
*
$ionicPlatform.ready(function() {
window.cordova.plugins.Keyboard.disableScroll(true);
cordova.plugins.Keyboard.disableScroll(true);
cordova.plugins.Keyboard.close();
cordova.plugins.Keyboard.show();
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
//cordova.plugins.Keyboard.close();
}
});now just i developing a simple website note a an app mobile so i can't use cordova plugiin,