primefaces / primefaces/primeng

floatlabel on select and multiselect and inputgroup

Open
#19,082 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Resolution: Stale Status: Needs Triage
Dominant language
TypeScript
Stars
12.5k
Forks
5.1k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Floatlabel variant "on" on a select/multiselect with a placeholder is positioned in the select/multiselect. Should be positioned like in a filled component.

Floatlabel on an inputgroup is positioned behind the component when the input is focused. Should be visible above the input.

Image

Pull Request Link

No response

Reason for not contributing a PR
  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other
Other Reason

No response

Reproducer

https://stackblitz.com/edit/27uwnffj?file=src%2Fapp%2Ffloat-label-basic-demo.scss

Environment

Windows

Angular version

20.0.4

PrimeNG version

v20

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

Create a floatlabel on a select/multiselect component with a placeholder.

Expected behavior

Floatlabel is positioned correctly above the select/multiselect with a placeholder, like in a filled input.

Floatlabel on an inputgroup should be visible.

PrimeNG is missing the css selectors for floatlabel:
.p-floatlabel:has(.p-select[placeholder]) label,
.p-floatlabel:has(.p-multiselect[placeholder]) label

.p-floatlabel-on:has(.p-select[placeholder]) label,
.p-floatlabel-on:has(.p-multiselect[placeholder]) label

Example CSS fix is in the stackblitz scss file.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproducer and inspect PrimeNG's floatlabel styles for select, multiselect, and inputgroup. Verify the placeholder selectors and focused inputgroup state against the expected filled-style positioning; done when both controls display labels above the component and remain visible when focused.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
57/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.