Auto-width to contents for ddl input.e-input

[Glen Alexander]

Hi,

Is it possible to make the width of the input.e-input that displays the selected value of the DropdownList to auto-fit to its content? For example, in the attached, I want the control to only be as wide as the contents when selected 'All Claims', and if I select a value that has more content, such as My Saved Claims Filter', the control expands in width to fit the contents of that selected value.

It seems to a width that I can't change.

Attachment: dropdown_e846c51e.zip

[Berly Christopher]

Hi Glen, 

  

Greetings from Syncfusion support. 

  

If we provide the width as auto then DropDownList input will be rendered the width which item text has larger length in the data source. If we want to modify the width based on the selected item text length, we need to calculate the width and applied to the component. Kindly refer the below code example, 

  

<ejs-dropdownlist 

id="games" 

#sample1 

[dataSource]="sportsData" 

[fields]="localFields" 

[width]="width" 

[popupWidth]="popupwidth" 

(select)="onSelect($event)" 

[placeholder]="localWaterMark" 

[popupHeight]="height" 

></ejs-dropdownlist> 

</div> 

export class AppComponent { 

  @ViewChild("sample1") 

  public ddlObj: DropDownListComponent; 

  

  public onSelect(args) { 

    // var multiObject = document.getElementById(id).parentElement; 

    var width = this.getTextWidth(args.itemData.Game, "bold 12pt arial"); 

    // 20px added for dropdownIcon width 

    this.ddlObj.element.style.width = width + 20 + "px"; 

  } 

  getTextWidth(text, font) { 

    // re-use canvas object for better performance 

    var canvas = 

      (this.getTextWidth as any).canvas || 

      ((this.getTextWidth as any).canvas = document.createElement("canvas")); 

    var context = canvas.getContext("2d"); 

    context.font = font; 

    var metrics = context.measureText(text); 

    return metrics.width; 

  } 

} 

 

 

  

Sample Link: https://stackblitz.com/edit/angular-b7tz2s?file=app.component.ts  

  

Regards, 

Berly B.C