floating labels do not work with dropdowns

[hydeneil]

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!

In HTML :

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>
</span>

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!!

[mert.sincan]

Hi,

Thanks a lot for all feedbacks. We have made some improvements in this regard. Please see our demo page;
https://primefaces.org/primeng/showcase/#/floatlabel

Best Regards,