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"
Floating label on text input with placeholder
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:
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
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;
}
I opened an PrimeNG-issue and hope there is a built-in feature for this soon:
https://github.com/primefaces/primeng/issues/11508
-
- Posts: 1
- Joined: 19 May 2022, 14:03
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.How do you make sure the p-float-label is floating by default instead of onfocus event trigger?
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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests