Initial missalignment of Placeholder when form control is used

[Cosmin Budac]

I am using a dropdown tree component and I am providing the "formControlName" in order to connect this component to the underlying form. I am noticing that on the first load of the page, the placeholder is misaligned:

However, after selection/deselection of items, the placeholder returns to its place:

Please find a demo here:

https://stackblitz.com/edit/angular-cx4c5h?file=src/app/app.component.html

Please also provide a solution for this bug.

Thanks

[Indhumathy Loganathan]

Hi Cosmin,

Greetings from Syncfusion support.

To adjust the placeholder properly on initial rendering, set the floatLabelType to Auto in the Dropdown Tree component. Check out the modified code snippet below.

<ejs-dropdowntree #sfDropDownTree [id]="id" formControlName="portfolios" [fields]="fieldsModel"

  [showCheckBox]="showCheckBox" [treeSettings]="treeSettings" [showSelectAll]="showSelectAll"

  [allowFiltering]="allowFiltering" [placeholder]="placeholder" [unSelectAllText]="deselectAllText"

  [selectAllText]="selectAllText" floatLabelType="Auto" [mode]="mode">

</ejs-dropdowntree>

Sample: https://stackblitz.com/edit/angular-ufrg8d?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Check the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L