For some reason I can’t get the inputs to work normally on iOS (they work perfectly on Android though), on the login screen, for some weird reason they work fine on the sign-up screen though.
In this picture we can see that the top input has an ::after tag in html, (the white line on the bottom of the input), but the one on the bottom does not.
You can’t appreciate this one on this picture, but the email input, you start typing something and for some reason what you type is not visible until you change focus, but the blue cursor moves while you type
This last one is pretty self explanatory, when I type something on the password (in spanish, contraseña), there’s a black line covering the text I’m typing.
Screenshots were taken on an iPhone 7 with iOS 12.
Here’s the code:
<f7-list form class="login-form">
<f7-list-input
label="Email"
type="email"
floating-label
name="email"
placeholder="Email"
:value="email"
@input="email = $event.target.value"
></f7-list-input>
<f7-list-input
floating-label
label="Contraseña"
type="password"
name="password"
placeholder="Contraseña"
:value="password"
@input="password = $event.target.value"
></f7-list-input>
</f7-list>
<f7-button class="no-transform" style="color: #F7FC96;">¿Olvidaste tu contraseña? Recupérala</f7-button>
<f7-button
class="fillF7Button"
fill
style="background-color: #ffd92d"
@click="login"
>Iniciar sesión</f7-button>
<table style="width:100%;">
<tr>
<td style="width:45%">
<hr />
</td>
<td style="width:10%; color:white;" align="center">ó</td>
<td style="width:45%">
<hr />
</td>
</tr>
</table>
<f7-button @click="gmailLogin()" class="fillF7Button socialButton" fill style="background-color: #D54D4D">
<img :src="googleLogo" alt />
Continuar con Gmail
</f7-button>
<f7-button @click="facebookLogin()" class="fillF7Button socialButton" fill style="background-color: #3B5998">
<img :src="facebookLogo" alt />
Continuar con Facebook
</f7-button>
<f7-button
class="no-transform"
style="color: #F7FC96;"
@click="$f7router.navigate('/signup/')"
>¿Aún no tienes cuenta? Regístrate aquí</f7-button>
<div
style="position: relative; bottom: 25px; z-index:-1; width: 100%; height: 0; overflow:visible;"
>
<img style="width:100%;" :src="coins" alt />
</div>
This is the CSS
<style>
.no-transform {
text-transform: none;
}
.login-form .item-label {
--f7-input-font-weight: 300;
color: white;
font-style: italic;
}
.login-form .item-input-focused .item-floating-label {
color: #ffd92d !important;
font-weight: bold !important;
font-style: normal;
}
.login-form {
--f7-input-text-color: #ffffff;
--f7-input-font-size: 16px;
--f7-input-font-weight: 300;
--f7-input-placeholder-color: white;
--f7-input-placeholder-font-style: italic;
--f7-input-outline-border-color: #fff;
}
.login-form .item-input-wrap:after {
background-color: white !important;
}
.login-form .item-input-wrap:after .focused {
background-color: white !important;
}
.login-page .page-content {
background-color: black;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #fff;
margin: 1em 0;
padding: 0;
}
.socialButton img{
position:absolute;
left: 10vw;
height:20px;
}
.loader {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
</style>