CODEWITHSUNDEEP
angularprimeng
Peter
Peter

Reputation: 63

PrimeNG floatLabel is not working properly

I am using Angular 17 with PrimeNG and I have an issue where p-floatLabel doesn't work as intended. There's no error anywhere but the label doesn't float. I don't know what I'm supposed to do.

Here's my html:

<div>
    <p-floatLabel>
        <input pInputText id="username"/>
        <label for="username">Username</label>
    </p-floatLabel>
</div>

Also, here's the beginning of my component:

import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { FloatLabelModule } from 'primeng/floatlabel';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ButtonModule, InputTextModule, FloatLabelModule, CommonModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.sass'
})

The label and the input are shown, but the label isn't doing what it is supposed to do according to PrimeNG

Thank you

Upvotes: 2

Views: 1244

Answers (1)

Marlon
Marlon

Reputation: 234

in my Stackblitz approach it works as expected. For a correct label function, there must be nothing in the input field.

For a more specific solution, you would need to share more of your source code. Since I can't read the problem from your current one.

Edit: Do you import the browseranimations module in angular and the animations module from primeng?

Upvotes: 0

Related Questions