Ionic 4 / Angular - 验证突出显示超出本机输入字段

Question

将用户输入添加到设置宽度的输入表单时，下划线超出输入范围。

给定以下代码：

    <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>

此外，当我在一个字段上切换时，INPUT 覆盖了整个 ion-item 字段，而不是 ion-input 字段，如下所示：

我尝试了对 css 的各种更改，但没有取得太大的成功。通过检查器，我可以通过将 --inset-padding-end 变量更改为 0 来解决这个问题，但我还没有找到如何全局更改/设置它？

有没有任何人知道的快速修复方法？当ion-list设置为"inset"时，这个错误特别难看，如下图：

Answer 1

这与您输入表单的固定宽度无关。请将 ion-item --padding-start 的 css 属性设置为 0

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

离子项目还有其他与填充相关的 custom css properties，您可以使用它们来获得任何想要的效果。

Ionic 4 / Angular - 验证突出显示超出本机输入字段

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

validation

focus

input

ionic-framework

angular