Ionic 2 - ion-list组件隐藏了Android平台中的第二项

时间:2017-05-21 07:18:49

标签: ionic-framework ionic2

我的主页如下所示。

enter image description here

我的主页html代码如下。

<ion-content class="background">
  <p class="page-title">Talker</p>
  <ion-card>
    <ion-card-header>
     Login
    </ion-card-header>
     <ion-card-content>
        <ion-list>
          <ion-item active>
            <ion-input type="item" placeholder="Username"></ion-input>
          </ion-item>
          <ion-item active>
            <ion-input type="password" placeholder="Password"></ion-input>
          </ion-item>
        </ion-list>
        <a class="right-align-text">Forgot Password</a>        
        <button ion-button block outline color="light"><p>OR</p></button>          
        <button ion-button block facebook color="facebook">
              <ion-icon name="logo-facebook"> </ion-icon> Login With Facebook
        </button>
      </ion-card-content>
  </ion-card>
</ion-content>

现在,当我运行代码时,我无法输入密码&#39;详情。如果我单击“密码”字段,页面将自动显示如下。

enter image description here

我的CSS文件

page-home {
.background{
    background-image : url('../assets/bg.jpg');
}
.page-title{
    text-align : center;
    font-family: 'Ravi Prakash', cursive;
    font-size: 40px;
    color : snow;
}
.left-align-text{
    text-align : left;
    align-content : left;
    justify-content : left;
    float : left;
}
.right-align-text{
    text-align : right;
    align-content : right;   
    justify-content : right;
    float : right;
}
a{
    cursor: pointer;
}
.link-text{
    color : blue;
}
.scroll-content{
    align-content : top;
    display : flex;
    flex-direction : column;
    justify-content : top;
    text-align : top;
}

.login-card{
    background : lightpink;
    border-radius : 10px;
}

.login-card ion-item{
    border-radius:5px;
    margin-bottom : 5px;
}

.orbutton{
    width : 10%;
    position : relative;
    left : 40%;  
    margin : 10px;
}
}

这仅在Android平台上发生。当我选择在IOS平台上运行相同的代码时,一切正常。 有人可以帮我解决这个问题吗?

0 个答案:

没有答案