Angular primeng drop down with float label render badly on first time

user_1832932 0
Viewed 5477

I have an angular application in where im using floating labels when i first load the component (a p-dialog) the floating labels are "falling down" to the select as shown in the image enter image description here

here is the code im using

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

this form is generated using the formBuilder and what i noticed is that if i call form.reset(), then on the next time the module is rendered nicely. Im not sure what is the source of the problem any ideas?

primeng angular
5 Answers

Please use like this;

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [autoDisplayFirst]="false" [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

and see autoDisplayFirst (Whether to display the first item as the label if no placeholder is defined and the value is null.) definition in https://www.primefaces.org/primeng/#/dropdown

autoDisplayFirst is true by default. Therefore, it displays the first item as the label if no placeholder is defined and the value is null.And it overlaps with float-label.

user_126095350

The issue seems to be related to the fact that when filling the form using patchValue or setValue, the dropdown filled property is not set to true you have to set it manually in the meanwhile

here is how

<p-dropdown [options]="invoiceStatus" formControlName="status" [style]="{ width: '100%' }" #ddStatus></p-dropdown>

and in the controller

@ViewChild('ddStatus')
  ddStatus: Dropdown;

and later when setting a value to the form call set the filled property this way this.ddStatus.filled = true; i hope they will fix it soon

user_18329320

I don't know what the cause is but you could try to put a @ViewChild() on your dropdown and call the updateFilledState() method on it.

user_67795950

Your label rendered on top of the drop down. The float label CSS that you are working with either isn't' set up for a p-dropdown (as opposed to an input, or a select)

user_107722690

you can use like this

 <div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [options]="categories" formControlName="category" [style]="{ width: '100%' }">
<ng-template pTemplate="item" let-option> <span>{{option.label || 'Select a contact type'}}</span> </ng-template>
</p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

make your null valued option label to "".

user_53293820
Related