将用户输入添加到设置宽度的输入窗体时,下划线将超出输入的边界。
angular - Ionic 4/Angular-验证突出显示超出了 native 输入字段-LMLPHP
给定以下代码:

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

此外,当我切换到一个字段时,输入将覆盖整个离子项字段,而不是离子输入字段,如下所示:
angular - Ionic 4/Angular-验证突出显示超出了 native 输入字段-LMLPHP
我尝试过对css进行各种更改,但都没有成功。通过Inspector,我可以通过将--inset padding end变量更改为0来解决这个问题,但是我还没有发现如何全局更改/设置它?
有没有谁知道的快速解决方法?当离子列表设置为“插入”时,此错误看起来特别糟糕,如下所示:
angular - Ionic 4/Angular-验证突出显示超出了 native 输入字段-LMLPHP

最佳答案

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

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

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

07-24 09:37
查看更多