Question

我真的不确定发生了什么，但当用户输入字段处于活动状态时，屏幕上的徽标和其他内容就会消失。这与页面的scss文件有关吗？请帮忙。

这是页面的sccs文件：

.page-main {

 .image {  
    display:block;
    height: 40%;
    width: auto; 
    margin-left:auto;
    margin-right:auto;
 }

 .login {
    display: block;
    width: auto;
    height: 8%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;   
 }

 .register {
    display: block;
    width: auto;
    height: 8%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
 }

 .fgtpwd {
    display: block;
    width: auto;
    height: 8%;
    margin-left: auto;
    margin-right: auto;
 }

}

这是html文件：

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="page-main">
  <img src="assets/img/logo.png" class="image"/>
    <ion-item>
     <ion-label color="primary" floating>Email</ion-label>
     <ion-input type="email" [(ngModel)]=user.email></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary" floating>Password</ion-label>
      <ion-input type="password" [(ngModel)]=user.password></ion-input>
    </ion-item>
     <button class="login" (click)="login(user)" ion-button round medium icon-end color="primary">
        {{ loginMsg }}
        <ion-icon name="arrow-forward"></ion-icon>
     </button>
     <button class="register" (click)="reg()" ion-button item-end clear medium color="primary">
        {{ regMsg }}
     </button>
     <button class="fgtpwd" (click)="forgtpwd()" ion-button clear medium color="primary">
        {{ fgtpwd }}
     </button>
</ion-content>

我不确定sccs文件是否足以根据屏幕大小和分辨率调整徽标和内容的大小。

谢谢！

Answer 1

您需要为页面内容设置.page-main{ min-height: 100%; }，如下所示。

lib/assets/javascripts/rest_in_place/rest_in_place.coffee.erb

离子应用程序的UI问题

1 个答案: