J'essaie d'implémenter une page simple avec un formulaire de connexion (saisie de texte utilisateur/mot de passe + 1 bouton). Je voudrais fixer ce formulaire au bas d'un contenu ionique. Mais ça ne marche pas.
HTML:
<ion-view hide-nav-bar="true">
<ion-content padding="true">
<img class="logo" src="img/logo.jpeg" />
<div class="login-form">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>
</ion-content>
Je voudrais définir comme "fixe" le formulaire div.login.
L'utilisation du CSS suivant ne fonctionne pas:
{
position: fixed;
bottom: 20px;
}
De plus, avec position: les textes à saisie fixe ne semblent plus modifiables.
Dans Ionic, est-il possible de fixer une partie du contenu au fond? THX!
Vous pouvez utiliser n'importe quoi dans le ion-content
Avec un bouton à l'intérieur.
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
<div class="fixed-outside">
<div class="row">
<div class="col">
<button class="button button-circle button-energized icon ion-log-in"></button>
</div>
<div class="col">
<button class="button button-circle button-positive icon ion-social-facebook"></button>
</div>
</div>
<p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>
</div>
Que diriez-vous d'utiliser simplement la barre d'onglets par défaut ionic et de changer simplement la hauteur en auto ou en tout px souhaité. Assurez-vous simplement de mettre le code sous la balise ion-content.
Code:
<ion-content padding="true">
</ion-content>
<div class="tabs tabs-dark" style="height:auto;">
<div class="row">
<div class="col">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" >
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-positive">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
Exemple de Codepen: http://codepen.io/ridwan/pen/JozeYK
Vous pouvez utiliser une directive pour calculer la hauteur du formulaire. Il recalculera lors du redimensionnement de la fenêtre. Je n'ai pas testé la navigation hors de la page.
HTML pertinent
<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
<ion-content padding="true" scroll="false">
<ion-scroll scroll-height>
Content to go above the form
</ion-scroll>
<div class="login-form">
Login form
</div>
</ion-content>
</ion-view>
CSS
.scroll-content {
position: relative;
}
div.login-form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Directif
.directive('scrollHeight', function($window) {
return {
link: function(scope, element, attrs) {
scope.onResize = function() {
var winHeight = $window.innerHeight;
var form = angular.element(document.querySelector('.login-form'))[0];
var formHeight = form.scrollHeight;
var scrollHeight = winHeight - formHeight;
element.css("height", scrollHeight + "px");
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
})
tous les éléments que vous souhaitez avoir fixés en bas doivent être hors du ion-content
. Ceci est un exemple de travail:
<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
<img class="logo" src="img/logo.jpeg" />
</ion-content>
<!-- align to the bottom of the page -->
<div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>
Je viens de trouver une solution simple, qui fonctionne bien pour moi.
<ion-content>
<ion-scroll style="height: 300px">
<div style="height: 1000px">
your scroll content
</div>>
</ion-scroll>
<div>
your fixed div, maybe a form
</div>
</ion-content>
vous pouvez également vous référer à: http://ionicframework.com/docs/api/directive/ionScroll/
J'espère que ça aide.
J'ai fini par contourner plus ou moins les intentions d'Ionic et utiliser une disposition de boîte flexible:
<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
<div class="flex-head"> ... </div>
<div class="flex-body flex-1"> ... </div>
<div class="flex-foot"> ... </div>
</ion-view>
Le SCSS, utilisant les mixins d'Ionic, ressemble à ceci:
.flex-wrapper {
@include display-flex;
@include flex-direction(column);
...
}
.flex-1 {
@include flex(1);
...
}