Combobox width based on selected item

[Grzegorz Golen]

Hello,

is there a way to set the combobox width based on the selected itemData.name string width? I mean explicitly the box, not the dropdown area.

Regards :)

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Grzegorz, 

Greetings from Syncfusion support. 

We have checked your query of updating the width of the Combobox based on the selected value. We would like to know you that you can configure the width property of Combobox to adjust its width and it has 100% by default. As the requirement is to update the width based on the input element’s value, we need to change the default width 100% to auto with the help of width property.

However, setting width to auto will not affect the input element’s width as it is rendered with a default width unlike other HTML elements. In order to overcome this, we need to set size for input element and this has to be done in the following circumstances. 

1. Created event – Triggers when the control is created (Need to set a default size for the input element. You can set a default size based on the application needs.)
2. Change event – Triggers when every value gets changed (Need to update the size of the input element based on the changed value length.)
3. Keydown event – Triggers when every key is pressed down. As the change event will trigger on every value select from dropdown and also it will not trigger on typing value in input element, we need to go for keydown event for this specific scenario. (Need to update the size of the input element based on the element value length).

In addition to that, dropdown popup width will be based on input element’s width if any width for the popup is explicitly provided. Since our requirement is to update only the input element’s width, we need to set static width to the popup with the help of the “popupWidth” property. 

We have made sample for your convenience. Please find the sample in the below link.

Sample Link       :  https://stackblitz.com/edit/angular-combobox-width

Code Snippet     : 

[app.component.html] 

    <ejs-combobox 

    id="games" 

    #local 

    width="auto" 

    [dataSource]="sportsData" 

    [fields]="localFields" 

    [placeholder]="localWaterMark" 

    (created)="onCreated()" 

    (change)="onChange($event)" 

    popupWidth="250px" 

  ></ejs-combobox> 

[app.component.ts] 

public onCreated() { 

    let inputElement: HTMLInputElement = this.instance.element.firstElementChild 

      .children[1]; 

    inputElement.addEventListener("keydown", args => { 

      this.updateWidth(args.target.value); 

    }); 

    // Setting size if any predefined value provided 

    if ( 

      inputElement.value.length && 

      inputElement.value.length > this.inputSize 

    ) { 

      inputElement.size = inputElement.value.length; 

    } else { 

      inputElement.size = this.inputSize; 

    } 

  } 

  public onChange(args) { 

    this.updateWidth(args.itemData ? args.itemData.Game : ""); 

  } 

  public updateWidth(text: String) { 

    // Update the size based on the input element value 

    let inputElement: HTMLInputElement = this.instance.element.firstElementChild 

      .children[1]; 

    if (text.length) { 

      inputElement.size = inputElement.value.length; 

    } else { 

      inputElement.size = this.inputSize; 

    } 

  } 

Screenshot        : 

Smaller Value	Bigger Value

Hope this helps to achieve your requirement. Kindly integrate the provided solution with your application and get back to us if you need any further assistance on this. 

Regards, 

Jeyanth.