我正在尝试使用登录表单(用户/密码文本输入+ 1按钮)实现一个简单的页面。我想将这种形式修复到离子含量的底部。但它不起作用。
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>
我想设置为&#34;固定&#34; div.login-form。
使用以下CSS不起作用:
{
position: fixed;
bottom: 20px;
}
此外,对于位置:固定输入文本似乎不再可编辑。
在Ionic中,是否可以将部分内容固定到底部? THX!
答案 0 :(得分:33)
您可以使用ion-content
内的任何内容,并使用其中的按钮。
<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>
答案 1 :(得分:6)
如何使用默认的离子标签栏,只需将高度更改为自动或您希望的任何px。只需确保将代码放在ion-content标签下面。
代码:
<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>
Codepen示例:http://codepen.io/ridwan/pen/JozeYK
答案 2 :(得分:5)
您可以使用指令来计算表单的高度。它会在窗口调整大小时重新计算。我还没有测试导航离开页面。
相关HTML
<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;
}
指令
.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();
})
}
}
})
答案 3 :(得分:4)
您希望在底部修复的所有元素都不在ion-content
之内。这是一个有效的例子:
<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>
答案 4 :(得分:2)
我只是找到一个简单的解决方案,对我来说很好。
<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>
您还可以参考:http://ionicframework.com/docs/api/directive/ionScroll/
我希望它有所帮助。
答案 5 :(得分:0)
我最终或多或少地绕过了Ionic的意图并使用弹性框布局:
<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>
SCSS,使用Ionic的mixins,看起来像这样:
.flex-wrapper {
@include display-flex;
@include flex-direction(column);
...
}
.flex-1 {
@include flex(1);
...
}
答案 6 :(得分:-1)
实际上我使用的是Ionic 2.0.0版本,我使用此代码解析
<ion-fixed class="fixed">
<button fab fab-right fab-bottom>
${{ totalPrice }}
</button>
</ion-fixed>
文件Scss中的
.fixed {
bottom: 50px;
right: 10px;
}