将用户输入添加到设置宽度的输入窗体时,下划线将超出输入的边界。
给定以下代码:
<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>
此外,当我切换到一个字段时,输入将覆盖整个离子项字段,而不是离子输入字段,如下所示:
我尝试过对css进行各种更改,但都没有成功。通过Inspector,我可以通过将--inset padding end变量更改为0来解决这个问题,但是我还没有发现如何全局更改/设置它?
有没有谁知道的快速解决方法?当离子列表设置为“插入”时,此错误看起来特别糟糕,如下所示:
最佳答案
它与输入表单的固定宽度无关。请将ion-item
--padding-start
的css属性设置为0
ion-item {
--padding-start: 0;
}
还有其他与填充相关的离子项custom css properties可以用来获得任何想要的效果。