Ionique cadre et le bas de contenu fixe
Je suis en train de mettre en œuvre une simple page avec un formulaire de connexion (utilisateur/mot de passe de saisie de texte + 1 bouton). Je tiens à corriger ce formulaire au bas d'un ion de contenu. Mais il ne fonctionne 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" de la div.formulaire d'ouverture de session.
En utilisant le code CSS suivant ne fonctionne pas:
{
position: fixed;
bottom: 20px;
}
Aussi, avec position:fixed entrée textes semblent pas plus modifiable.
Ionique, est-il possible de fixer une partie du contenu vers le bas?
Thx!
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser anythnig la
ion-content
avec un bouton à l'intérieur.Démo
Que diriez-vous simplement à l'aide de la valeur par défaut ionique de la barre d'onglet et il suffit de changer la hauteur de l'auto ou de toute px que l'on souhaite. Assurez-vous de mettre le code ci-dessous ion-balise de contenu.
Code:
Codepen exemple : http://codepen.io/ridwan/pen/JozeYK
Vous pouvez utiliser une directive pour calculer la hauteur de la forme. Il va recalculer sur la fenêtre de redimensionnement. Je n'ai pas testé de naviguer à l'extérieur de la page.
Codepen
HTML concernés
CSS
Directive
tous les éléments que vous voulez avoir fixé dans le fond devrait être hors de la
ion-content
. C'est un exemple de travail:Je viens de trouver une solution simple, qui fonctionne très bien pour moi.
vous pouvez aussi vous référer à: http://ionicframework.com/docs/api/directive/ionScroll/
J'espère que cela aide.
J'ai fini par plus ou moins contourner Ionique intentions et à l'aide d'un flex zone de mise en page:
Le SCSS, à l'aide Ionique du mixin, ressemble à quelque chose comme ceci:
en fait, je suis en utilisant la version Ionique 2.0.0-je le résoudre avec ce code
dans votre Fichier Scss