Floating label not working correctly

UI Components for Angular
Post Reply
vsarga1
Posts: 3
Joined: 01 Nov 2017, 16:50

15 Nov 2017, 17:42

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

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

24 Nov 2017, 14:45

Please try with PrimeNG 5.0.0. If the problem persists, create a plunker example (http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview)

Valantir
Posts: 1
Joined: 14 Feb 2018, 09:16

14 Feb 2018, 09:20

Hi, I have the same issue. In package.json i have primeng: "^5.2.0"

mcasper
Posts: 3
Joined: 22 Mar 2018, 00:03

03 Apr 2018, 20:36

Same problem here. I'm on 5.2.4

Will this be fixed soon?

axinedy
Posts: 6
Joined: 07 Nov 2017, 08:35

02 May 2018, 16:25

Have same problem with 5.2.5 using Firefox. But no this problem with Chrome

axinedy
Posts: 6
Joined: 07 Nov 2017, 08:35

03 May 2018, 12:02

If add floating label to a chips input field - label overlaps input text in both browsers - Firefox and Chrome:
Image

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>

dlambert
Posts: 1
Joined: 22 Apr 2018, 01:03

22 May 2018, 18:49

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.

avulanitin
Posts: 5
Joined: 16 Jul 2019, 22:10

24 Jul 2019, 22:12

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

RoseKalum
Posts: 3
Joined: 23 Jul 2019, 17:44

01 Aug 2019, 08:34

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!

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest