Page 1 of 1

floating labels do not work with dropdowns

Posted: 18 Jul 2018, 08:00
by hvk
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

Re: floating labels do not work with dropdowns

Posted: 18 Jul 2018, 13:59
by merve7
Please, can you remove ui-float-label class and try again?

Re: floating labels do not work with dropdowns

Posted: 19 Jul 2018, 09:08
by hvk
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

Re: floating labels do not work with dropdowns

Posted: 31 Aug 2018, 08:09
by hvk
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

Re: floating labels do not work with dropdowns

Posted: 31 Aug 2018, 10:19
by hvk
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.

Re: floating labels do not work with dropdowns

Posted: 14 Nov 2018, 20:20
by d.sichrovsky
I confirm this is still issue in 6.1.6

Re: floating labels do not work with dropdowns

Posted: 25 Jan 2019, 13:23
by Neil.Beukes
Also struggling with this issue... very annoying. Would it help to create a github issue?

Re: floating labels do not work with dropdowns

Posted: 01 Feb 2019, 13:20
by Reward
Very annoying that this is still an issue after all this time...

Re: floating labels do not work with dropdowns

Posted: 09 Oct 2019, 07:46
by hvk
this is still issue in v8