离子框架和底部固定含量
离子框架和底部固定含量
提问于 2014-06-11 22:29:26
我正在尝试实现一个简单的页面与登录表单(用户/密码文本输入+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>
我想将div.login-form设置为"fixed“。
使用以下CSS不起作用：
{
position: fixed;
bottom: 20px;
}此外，使用position:fixed输入的文本似乎不再可编辑。
在Ionic中，有可能将部分内容固定到底部吗？谢谢！
回答 7
Stack Overflow用户
发布于 2014-06-12 10:39:18
你可以使用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>Stack Overflow用户
发布于 2015-03-30 22:21:51
使用默认的离子标签栏并将高度更改为auto或您想要的任何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>Stack Overflow用户
发布于 2015-03-28 01:54:00
您可以使用指令来计算表单的高度。它将在调整窗口大小时重新计算。我还没有测试过离开页面的导航。
相关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();
})
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24165568
复制相关文章
相似问题
腾讯云开发者
