When adding user input to an input form of a set width, the underline extends beyond the bounds of the input.
Given the following code:
<ion-list lines="none">
<ion-item>
<ion-label color="medium" position="floating">Username</ion-label>
<ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
</ion-item>
<ion-text
color="danger"
[hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
>
<span padding>Valid email is required</span>
</ion-text>
<ion-item>
<ion-label color="medium" position="floating">Password</ion-label>
<ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
</ion-item>
<ion-text
color="danger"
[hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
>
<span padding translate>Password is required</span>
</ion-text>
<a href="/login/forgot" class="forgot-password ion-float-right">
[Forgot Your Password?]
</a>
</ion-list>
Additionally, when I tab onto a field, the INPUT covers the entire ion-item field, rather than the ion-input field, as shown below:
I've tried a various set of changes to the css with no great success. Via inspector, I am able to get rid of the issue by changing the --inset-padding-end variable to 0, but I have not found out how to change / set that globally?
Are there any quick-fixes for this that anybody knows of? This error is especially bad-looking when the ion-list is set to "inset", as shown below:
from Ionic 4 / Angular - validation highlight extends past the native input field
Nice post really helpful for everyone.
ReplyDeleteFull Stack Training in Hyderabad
Full Stack Training in Ameerpet
Full Stack Training Institute