Floating label on text input with placeholder

[adnansenyurt]

The following code causes placeholder text and label mix up while focused is not in the text box.

<span class="ui-float-label ">
<input id="float-input" type="text" size="30" pInputText placeholder="placeholder text">
<label for="float-input">Username</label>
</span>

Tested on Chrome and Safari.

"primeicons": "1.0.0",
"primeng": "8.0.1",
"primeng-extensions": "0.1.2"

[flawesome]

I just ran into the same issue.
This seems to be a common issue when working with placeholders in combination with floating labels.

I adjusted the CSS to workaround this issue:

Code: Select all

input::placeholder {
    opacity: 0;
}
input:focus::placeholder {
    opacity: 1;
}

This should be the expected behaviour anyway: Hiding the placeholder and only display it as soon as the input got focus and the float label moved upside the input field.

I opened an PrimeNG-issue and hope there is a built-in feature for this soon:
https://github.com/primefaces/primeng/issues/11508

[kcskishore]

How do you make sure the p-float-label is floating by default instead of onfocus event trigger?

[flawesome]

How do you make sure the p-float-label is floating by default instead of onfocus event trigger?

I don't think this is possible.

In fact, what's the intention for that?
Isn't this the exact reason why using the float label?

Otherwise i would just use label + textbox instead