Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Floating label with placeholder #11508

Closed
flawesomesoft opened this issue May 11, 2022 · 0 comments · Fixed by #11638
Closed

Floating label with placeholder #11508

flawesomesoft opened this issue May 11, 2022 · 0 comments · Fixed by #11638
Assignees
@cetincakiroglu
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone
14.0.0-rc.1

Comments

@flawesomesoft
Copy link

I'm submitting a ...

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-hfaqbo?file=src%2Fapp%2Fapp.component.ts

Current behavior
PrimeNG Input with floating label and placeholder cause overlapping text

Expected behavior
The placeholder should only show up as soon as the Input field got focus and the floating label moved upside the input field.

I accomplished this behaviour with a workaround by adjusting the CSS as you can see here:
https://stackblitz.com/edit/github-hfaqbo-iv54jr?file=src%2Fapp%2Fapp.component.css,src%2Fstyles.scss,src%2Fapp%2Fapp.component.ts

What is the motivation / use case for changing the behavior?
It's a common practice to use floating labels in combination with placeholders.

  • Angular version: 13.3.4
  • PrimeNG version: 13.3.3

  • Browser:
    Tested on Chrome/Edge/Firefox

  • Language: TypeScript 4.6.4

  • Node (for AoT issues): node --version = 16.4.2
volvachev pushed a commit to volvachev/primeng that referenced this issue May 11, 2022
fix(primeng/inputtext): floating label with placeholder
0ef31d7 
Fixes primefaces#11508.
volvachev added a commit to volvachev/primeng that referenced this issue May 11, 2022
@volvachev
fix(primeng/inputtext): floating label with placeholder
8bce445 
Fixes primefaces#11508.
@volvachev volvachev mentioned this issue May 11, 2022
Closed
@cetincakiroglu cetincakiroglu self-assigned this May 23, 2022
@cetincakiroglu cetincakiroglu added the Status: Pending Review Issue or pull request is being reviewed by Core Team label May 23, 2022
@cetincakiroglu cetincakiroglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Jun 8, 2022
@cetincakiroglu cetincakiroglu added this to the 13.4.2 milestone Jun 8, 2022
@yigitfindikli yigitfindikli modified the milestones: 13.4.2, 13.Future Jun 14, 2022
@cetincakiroglu cetincakiroglu linked a pull request Jun 17, 2022 that will close this issue
Fixed #11508 - Floating label with placeholder #11638
Merged
cetincakiroglu added a commit that referenced this issue Jun 28, 2022
@cetincakiroglu
Merge pull request #11638 from cetincakiroglu/issue-11508
80c5aab 
Fixed #11508 - Floating label with placeholder
@yigitfindikli yigitfindikli modified the milestones: 14.Future, 14.0.0-rc.1 Jun 29, 2022
@flawesomesoft flawesomesoft mentioned this issue Mar 14, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cetincakiroglu cetincakiroglu

Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Milestone
14.0.0-rc.1
3 participants
@yigitfindikli @cetincakiroglu @flawesomesoft