primefaces / primevue

Next Generation Vue UI Component Library

Home Page:https://primevue.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Password: style wont affect

almirhodzic opened this issue · comments

Describe the bug

The Tailwind style class "block w-full" wont affect for the Password Component.
My code:

<FloatLabel>
<Password
  id="password"
  v-model="form.password" 
  promptLabel="Passwort eingeben" 
  weakLabel="Unsicheres Passwort" 
  mediumLabel="Mittlere Sicherheit" 
  strongLabel="Sicheres Passwort"
  toggleMask
  required
  autocomplete="current-password"
  class="block w-full"
/>
<label for="password">Passwort</label>
</FloatLabel>```

It seems the style class is addapted on the wrapper for the inputfield itself and not at the inputform as expected. I believe that because the toggleMask is outside the Passwordinput.


### PrimeVue version
4.0.0-rc.2

### Vue version
3.x

### Language
TypeScript

### Build / Runtime
Vite

### Browser(s)
ALL

### Expected behavior

This results:
<img width="490" alt="Bildschirmfoto 2024-06-23 um 21 00 06" src="https://github.com/primefaces/primevue/assets/24458972/9ad67b1b-442e-437c-8607-ec8e7f68ee5f">

Expecting: full width eg. Email input

inputClass property can be used. Here is a solution:

  <FloatLabel class="w-full">
            <Password  inputClass="w-full" class="block w-full" />
            <label for="password">Passwort</label>
</FloatLabel>