floating labels do not work with dropdowns

Posts: 2
Joined: 28 Jan 2020, 17:28

13 Feb 2020, 16:38

AR7 wrote:
14 Jan 2020, 11:42
If someone is still blocked.
I solved this issue by adding a css class when my dropdown value is not null: [ngClass]="{'ddfilled': ddCivility.value != null}"
Seems to be a problem between the dropdown auto generated label tag with the selected value and the real label tag for the dropdown.

Hope I will help! ;)


Code: Select all

<span class="dd32 ui-float-label">
    <p-dropdown #ddCivility id="userDetailCivilities" placeholder=" " showClear="true" appendTo="body" [options]="civilities" [(ngModel)]="user.civility" [disabled]="isDisabled"></p-dropdown>
    <label for="userDetailCivilities" [ngClass]="{'ddfilled': ddCivility.value != null}">{{'users_civility' | translate}}</label>
In CSS :

Code: Select all

.ddfilled {
    top: -.75em;
    font-size: 12px;

WORKED FOR ME!!! Except I just put in "ui-inputwrapper-filled" instead of ddfilled and everything worked perfectly. Thanks so much!!

Posts: 4638
Joined: 29 Jun 2013, 12:38

09 Oct 2020, 22:42


Thanks a lot for all feedbacks. We have made some improvements in this regard. Please see our demo page;

Best Regards,

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests