Ionic 4 / Angular - validation highlight extends past the native input field

Question

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:

Answer 1

Its nothing to do with the fixed width of your input form. Please set css property of ion-item --padding-start to 0

    ion-item {
     --padding-start: 0;
    }

There are other padding related custom css properties of ion-item which you can use to get any desired effect.