离子框架和底部固定内容 [英] Ionic framework and bottom fixed content

问题描述

我正在尝试使用登录表单（用户/密码文本输入+ 1按钮）实现一个简单的页面。我想将这种形式修复到离子含量的底部。但它不起作用。

I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not work.

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。

I would like to set as "fixed" the div.login-form.

使用以下CSS不起作用：

Using the following CSS does not work:

{
    position: fixed;
    bottom: 20px;
}

此外，有位置：固定输入文本似乎不再可编辑。

Also, with position:fixed input texts seem no more editable.

在Ionic中，是否可以将部分内容固定到底部？
Thx！

In Ionic, is it possible to fix part of the content to bottom? Thx!

推荐答案

您可以使用 ion-content 里面有一个按钮。

You could use anythnig out the ion-content with a button inside of it.

演示

  <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>

这篇关于离子框架和底部固定内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！