Hi,
I have an issue with the floating label.I have the code like this.
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText>
<label for="float-input">Username</label>
</span>
When i enter some text and click outside the text box the "Username" text comes back and overlaps the entered text. I think once you have some text the "Username" text should stay at the top.
Please advise,
Vijay
Floating label not working correctly
Please try with PrimeNG 5.0.0. If the problem persists, create a plunker example (http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview)
If add floating label to a chips input field - label overlaps input text in both browsers - Firefox and Chrome:
Code: Select all
<span class="ui-float-label">
<p-chips id="heart-input"
[(ngModel)]="heartValues"
>
</p-chips>
<label for="heart-input">Main Descriptors </label>
</span>
I'm also see this issue with Firefox. The issue can be see on the documentation with Firefox page https://www.primefaces.org/primeng/#/inputtext.
-
- Posts: 5
- Joined: 16 Jul 2019, 22:10
Hi All,
I had similar issue in both chrome and Firefox.
When I imported InputTextModule in my application, it resolved the issue.
import {InputTextModule} from 'primeng/inputtext';
Posting for future reference!
Cheers,
Nitin
I had similar issue in both chrome and Firefox.
When I imported InputTextModule in my application, it resolved the issue.
import {InputTextModule} from 'primeng/inputtext';
Posting for future reference!
Cheers,
Nitin
Selector input:focus selects input when it get focus and Selector input:not(:focus):validselects input if valid input not be focus.
A. when you use required attribute and Do not enter any value in it:
1)Before focus and when lose focus:Nothing not be selected.(original state)
2)after focus input is invalid and it is selected with input:focus.
B. when you remove required attribute:
1)before focus select with input:not(:focus):valid.
2)after focus select with input:focus.
So, input is selected forever , And .floating-label will not return to the original state.
in your question, you say:"I don't need the required filed"
So, remove input:not(:focus):valid~.floating-label.
Full code: https://docsbay.net/floating-label-not-working
Hopefully it helps!
A. when you use required attribute and Do not enter any value in it:
1)Before focus and when lose focus:Nothing not be selected.(original state)
2)after focus input is invalid and it is selected with input:focus.
B. when you remove required attribute:
1)before focus select with input:not(:focus):valid.
2)after focus select with input:focus.
So, input is selected forever , And .floating-label will not return to the original state.
in your question, you say:"I don't need the required filed"
So, remove input:not(:focus):valid~.floating-label.
Full code: https://docsbay.net/floating-label-not-working
Hopefully it helps!
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest