Android bug?


#1

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");
        }
    }
}

#2

Bonjour!

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.


#3

Hi !
So now my inputs work, it was just a version issues but when i open the keyboard on my device all elements of my page disappear. When i open chrome inspector there no issues but i can see that the screen is cut.
The device screen size is 360x615 and when i open the keyboard it cut in 360x320 screen so this explain why my elements disappear. I don’t know why the keyboard do this.