floating labels do not work with dropdowns

Posts: 18
Joined: 27 Dec 2017, 18:05

18 Jul 2018, 08:00


I have the latest PrimeNG (v6.0.1) and Ultima (v6.0).

Floating label stays down, when dropdown value is set programmatically:

Code: Select all

  <div class="ui-g form-group">
               <div class="ui-g-12 ui-md-6">
                  <span class="md-inputfield ui-float-label">
                     <p-dropdown [options]="selYksikot" inputId="yksikko" formControlName="yksikko" autoWidth="false" [style]="{'width':'100%'}"
                        (ngModelChange)="yksikkoValittu($event)" editable="true">
                        <ng-template let-yx pTemplate="item">
                     <label for="yksikko">Yksikkö</label>
                  <div class="ui-message ui-messages-error ui-corner-all" *ngIf="frmGroup.get('yksikko').touched && frmGroup.get('yksikko').errors">
                     Tämä kenttä on pakollinen
I set value like this (I have two or more dropdowns - dropdown option values depend on other field values):

Code: Select all

I have tried setting the field dirty and touched:

Code: Select all

Adding new class to _forms.scss like this:

Code: Select all


can force label without ui-float-label class to upper position, but you have to do same changes after ultima updates.


Posts: 623
Joined: 12 Sep 2017, 10:44

18 Jul 2018, 13:59

Please, can you remove ui-float-label class and try again?

Posts: 18
Joined: 27 Dec 2017, 18:05

19 Jul 2018, 09:08

without ui-float-label the label stays down and field value overwrites it - so they are mixed, both visible.

With ui-float-label the label is positioned a little higher, but is still grey a little mixed the field value (like the input text field label, when the field is untouched).


Posts: 18
Joined: 27 Dec 2017, 18:05

31 Aug 2018, 08:09

v6.1.0 did not change this behavior - the second p-dropdown label still stays down after the value is set programmatically and the option values are updated based on the first p-dropdown

Posts: 18
Joined: 27 Dec 2017, 18:05

31 Aug 2018, 10:19

supporting myself, but if someone interested: find out that this seems to be timing issue - setting timeout resolves floating label issue:

Code: Select all

         setTimeout(() => {
         }, 500);
Floating label seems to stay down position, if the dropdown value is not found in options.

Posts: 2
Joined: 18 Nov 2017, 15:42

14 Nov 2018, 20:20

I confirm this is still issue in 6.1.6

Posts: 2
Joined: 10 Aug 2018, 10:18

25 Jan 2019, 13:23

Also struggling with this issue... very annoying. Would it help to create a github issue?

Posts: 2
Joined: 28 Sep 2018, 10:19

01 Feb 2019, 13:20

Very annoying that this is still an issue after all this time...

Posts: 18
Joined: 27 Dec 2017, 18:05

09 Oct 2019, 07:46

this is still issue in v8

Posts: 2
Joined: 14 Jan 2020, 11:32

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;

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests