htmlangularfrontendprimengprimeflex

Primeng p-password component width doesn't fit to container

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.

Solution

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