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

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 >
    <span >
        <i ></i>
        <input id="email1" type="email" pInputText  placeholder="Username" />
    </span>

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

    <button routerLink="/dashboard" pButton pRipple label="Log In" ></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.

CodePudding user response：

When styling PrimeNG components, attach styling using the inputs they provide:

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

If you inspect the produced HTML in the devtools, you'll notice that with your way, the styling is applied to their wrapper instead of the actual meaty HTML inside the wrapper.

CodePudding user response：

This solve my problem

<p-password id="password1" type="password"  [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>