Mobile App : Text boxes combine

Mobile App : Text boxes combine

  

Just trying my hands on mobile app.


I have designed login screen.

When I run app on my android device and open keyboard to type userid all textboxes overlap with each other.

Please advice how should I fix this?

Thanks and Regards,

Suraj Borade

Suraj,

WHoa, what did you build??? 

Is this issue also happening on web preview when you make your screen very small/narrow?

Can you share your eSpace, because I believe you have an issue in your CSS.

Kind regards,

Remco

:)

Hi Remco,

I am just trying my hands on this type of development.

This issue also happens on web preview when I make screen very small/narrow.

Please check login page from attached oml.

Thanks and Regards,

Suraj Borade

Solution

Hi Suraj, 

After looking for the .oml I tweaked your CSS to working better depends on the screen size.

Use the following CSS and remove your logic when focusing the inputs.

.login-screen {
    min-height: auto;
}

.login-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-bottom: 30px;
}

.Emailblock {   
    background: white;
}

.Passwordblock {
    background: white;
}

.ForgotPassword {
    text-align: center;  
    font-size: small
}

.NotaMember {
    text-align: center; 
    font-size: small
}

.Loginblock {
    color: white;
    background: red;
    text-align: center;
    height:40px;
    border: 1px solid red;
    border-radius: 5px;
    width: 100%;
    margin-top: 50px;        
}

.SignUpNow {
    color: white;
    background: red;
    height: 30px;
    border: 1px solid red;
    border-radius: 5px;
    text-align: center;
    margin-top: 20px;   
}

.Skip {
    color: orangered;
    text-align: center;
}


I hope this helps you and let me know if you have more questions. 

Best Regards

Solution

Hi Jose,

This worked perfect for me.

Thanks a lot for your time.

Kind Regards,

Suraj Borade