CODEWITHSUNDEEP
angularprimeng
naoru
naoru

Reputation: 2227

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

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?

Upvotes: 3

Views: 8956

Answers (5)

Faisal ahmed
Faisal ahmed

Reputation: 140

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

Upvotes: 0

Binara Thambugala
Binara Thambugala

Reputation: 776

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.

Upvotes: 6

naoru
naoru

Reputation: 2227

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

Upvotes: 2

Cyril
Cyril

Reputation: 254

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.

Upvotes: 1

Paul Hebert
Paul Hebert

Reputation: 404

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)

Upvotes: 0

Related Questions