Primeng p-密码组件宽度不适合容器

Question

我正在使用 primeng 做一个登录页面，一切都运行良好，但特别是当上面的输入完成时，p-password 组件不适合。

<div class="flex flex-column align-items-center gap-3  text-center   ">
    <span class="p-input-icon-left w-full">
        <i class="pi pi-user"></i>
        <input id="email1" type="email" pInputText class="w-full" placeholder="Username" />
    </span>

    <p-password id="password1" type="password" class="w-full" [feedback]="false" placeholder="Password"
        [toggleMask]="true"></p-password>

    <button routerLink="/dashboard" pButton pRipple label="Log In" class="w-full"></button>
</div>

这就是结果。我不知道我是否遗漏了一些东西。我阅读了 primeng 和 primeflex 文档，但没有任何效果。如果有人可以帮助我，我将非常感激。

Answer 1

这解决了我的问题

<p-password id="password1" type="password" class="w-full" [feedback]="false" placeholder="Password"
            styleClass="p-password p-component p-inputwrapper p-input-icon-right" [style]="{'width':'100%'}"
            [inputStyle]="{'width':'100%'}" [toggleMask]="true"></p-password>

Answer 2

如果您使用PrimeFlex（似乎您使用它），则将其添加到您的 p-password 元素中；

inputStyleClass="w-full"

或者您可以使用元素的inputStyle属性并设置宽度。

并且眼球图标可能无法到达正确的位置。要解决此问题，请添加以下内容： styleClass="w-full p-password p-component p-inputwrapper p-input-icon-right "