用戶界面問題與離子應用

-1

我真的不知道發生了什麼，但當用戶輸入字段處於活動狀態時，屏幕上的徽標和其他內容消失。這是與頁面的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文件是不夠好，調整標誌和基於屏幕大小和分辨率的內容。

謝謝！

來源

2017-09-24 Murali

你能在'SCSS'文件上顯示相關代碼嗎？ – Sampath

@Sampath我編輯了這個問題並添加了sccs和html代碼。我想編輯代碼，以便鍵盤覆蓋應用程序頁面的內容，用戶可以向下/向上滾動查看鍵盤覆蓋的內容。謝謝！ – Murali

您需要爲頁面內容設置如下所示的min-height。

.page-main{ 
    min-height: 100%; 
}

來源

2017-09-26 23:58:57 Sampath

用戶界面問題與離子應用

回答

相關問題