Hello,
I’m using a samsung with the 4.4.2 version of android.
On my computer when i’m using “ionic serve” the app work as well. When i’m testing the app on the device the interface is correct but when i’m going in input the application bug. My inputs and my buttons disappear. Further more my buttons don’t work.
(Soory for my bad english i’m french haha)
Login.html:
<ion-content class="background" padding>
<img class="logo-login" src="assets/logo/LH-Blanc.png">
<ion-card>
<ion-card-header>
Login
</ion-card-header>
<ion-card-content>
<ion-list no-line>
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
</ion-item>
</ion-list>
<button ion-button block>Sign In</button>
<button ion-button block outline color="light">Register</button>
<p>Stay signed in</p>
</ion-card-content>
</ion-card>
</ion-content>
login.scss:
page-login {
.logo-login {
width: 400px;
padding: 40px;
padding-bottom: 80px;
margin-left: auto;
margin-right: auto;
}
.background {
margin: 0;
padding: 0;
background-image: url("../assets/background/bg@Otherwise.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
/* pour anciens Chrome et Safari */
background-size: cover;
/* version standardisée */
}
.scroll-content {
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
ion-card.card {
box-shadow: none;
background: rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
ion-card-header.card-header {
color: #FFF;
font-size: 20px;
font-weight: bold;
}
.list>.item-blck:first-child {
border: medium none;
}
.item {
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.7);
border: medium none;
color: #111;
}
*::-webkit-input-placeholder {
color: #666!important;
}
}
@media screen and (max-width: 1024px) {
page-login {
.logo-login {
margin-left: auto;
margin-right: auto;
}
.background {
background-image: url("../assets/background/bg@1024x1366.jpg");
}
}
}
@media screen and (max-width: 414px) {
page-login {
.logo-login {
margin-left: auto;
margin-right: auto;
}
.background {
background-image: url("../assets/background/bg@414x736.jpg");
}
}
}