1

I'm doing a login page with primeng and all works well but specifically the p-password component doesn't fit when even the above input does it.

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

This is the result. I don't know if I'm missing something. I read primeng and primeflex documentation but nothing works. If someone could help me I would be very grateful.

Ricardo Ruíz Alarcón
  • 85
  • 8

2 Answers2

7

This solve my problem

<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>
Ricardo Ruíz Alarcón
  • 85
  • 8
1

If you use PrimeFlex (seems you use it), then add this to your p-password element;

inputStyleClass="w-full"

or you can use inputStyle property of the element and set the width.

and the eyeball icon may not get the right position. To fix this issue add this: styleClass="w-full p-password p-component p-inputwrapper p-input-icon-right"

Bugay Sarikaya
  • 116
  • 1
  • 4