FloatLabel: The label appears outside the box

[CosmeValera]

Describe the bug

I have the latest Prime React dependency installed, I'm using the new component FloatLabel, but the placeholder is appeearing outside the box.

Images:

Code:

FloatLabel docu

The error:

Reproducer

No response

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

Use the code as put in the documentation and it won't work

Expected behavior

https://primereact.org/floatlabel/

[Rekl0w]

I guess #6440 will solve this problem

[CosmeValera]

I just realised it was another css file that was colliding with the styles of FloatLabel.

In this case I had this:

Which was making the span.float-label be centered, but it has no effect on the label, thus creating that strange effect: With inspector

I guess that using css files, instead of the theme will cause this type of problems, so it is not guaranteed for bugs like this not to appear when people use custom css like in my case.

Anyway, I've been investigating, and I noticed that the problem happens because both the span (container) and the label have position: relative, therefore label does not depend on the position of span, but on the position of the outer container. This could be fixed making the span that contains the input and the label have position: absolute.

I'm not sure if this behaviour is considered a feature or a bug.