floating labels do not work with dropdowns

Forum rules
Please note that response time for technical support is within 3-5 business days.
hvk
Posts: 20
Joined: 27 Dec 2017, 18:05

18 Jul 2018, 08:00

Hi,

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">
                           <div>{{yx.label}}</div>
                        </ng-template>
                     </p-dropdown>
                     <label for="yksikko">Yksikkö</label>
                  </span>
                  <div class="ui-message ui-messages-error ui-corner-all" *ngIf="frmGroup.get('yksikko').touched && frmGroup.get('yksikko').errors">
                     Tämä kenttä on pakollinen
                  </div>
               </div>
I set value like this (I have two or more dropdowns - dropdown option values depend on other field values):

Code: Select all

         this.frmGroup.get('yksikko').setValue(h.yksikko);
         this.frmGroup.get('toimintayksikko').setValue(h.toimintayksikko);
I have tried setting the field dirty and touched:

Code: Select all

     this.frmGroup.get('yksikko').markAsTouched();
     this.frmGroup.get('yksikko').markAsDirty();
Adding new class to _forms.scss like this:

Code: Select all


    .pddlabel{
      top:-20px;
      font-size:12px;
      color:$primaryColor;
    }

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

BR,
Harri

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

18 Jul 2018, 13:59

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

hvk
Posts: 20
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).

/Harri

hvk
Posts: 20
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

hvk
Posts: 20
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(() => {
            this.frmGroup.get('secondDropdownfieldOptionsDependingonFirstDropdown').setValue(h.somevalue);
         }, 500);
Floating label seems to stay down position, if the dropdown value is not found in options.

d.sichrovsky
Posts: 2
Joined: 18 Nov 2017, 15:42
Contact:

14 Nov 2018, 20:20

I confirm this is still issue in 6.1.6

Neil.Beukes
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?

Reward
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...

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

09 Oct 2019, 07:46

this is still issue in v8

AR7
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! ;)

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;
}

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests