Component: p-password has incorrect width

[MAN-Sendance]

Describe the bug

The password component has a wrong width due to missing width inheritance in the child input field.

Environment

Angular (latest version) PrimeNG (latest version) Primeflex (latest version)

Reproducer

No response

Angular version

16.1.4

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

<label for="email1" class="block text-900 font-medium mb-2"
  >Email</label
>
<input
  pInputText
  id="email1"
  type="text"
  placeholder="Email address"
  class="w-full mb-3"
/>

<label for="password1" class="block text-900 font-medium mb-2"
  >Password</label
>
<p-password
  [feedback]="true"
  [toggleMask]="true"
  id="password1"
  placeholder="Password"
  class="w-full mb-3 block"
/>

Expected behavior

Applying the following styles fixed the issue for me

.p-password {
  width: inherit;
}
.p-password-input {
  width: inherit;
}

[calumk]

This is still an issue for me

[barteltm]

To make it work I had to set both: style and inputStyle:

[inputStyle]="{'width': '100%'}" [style]="{'width': '100%'}" 

[AutoAwesome]

For me this is still an issue. The fixes above worked though.

[molnarerwin]

I think you just need to use fluid.

For me using Vue this works:

<Password
  id="password"
  name="password"
  placeholder="Password"
  class="mt-2"
  toggle-mask
  fluid
></Password>

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding! Best Regards,