动态设置选择元素宽度等于其选项的内容宽度

Question

Im trying to make select element width equal to it's option text width in angular.

My HTML component simply look like this:

<form [formGroup]="profileForm">
  ...
  <select (change)="adjustSelectWidth($event.target)" formControlName="members">
    <option value="1">Me</option>
    <option value="2">Me, my spouse</option>
    <option value="3">Me, my spouse and my kids</option>
  </select>
  ...
</form>

What I have tried:

• Get the option element width using clientWidth then apply that to select element but that width is 0.

export class AppComponent  {
  profileForm = new FormGroup({
    members : new FormControl(''),
  })

  adjustSelectWidth(e){
    const optionValue = this.profileForm.get('members').value;
    const optionWidth = document.querySelector(`option[value="${optionValue}"]`).clientWidth;
    e.style.width= optionWidth + "px"
  }
}

• Get the option's innerHTML length then mutiply it with a fixed pixel but it not a dynamic option

export class AppComponent  {
  profileForm = new FormGroup({
    members : new FormControl(''),
  })

  adjustSelectWidth(e){
    const optionValue = this.profileForm.get('members').value;
    const optionTextLength = document.querySelector(`option[value="${optionValue}"]`).innerHTML.length;
    e.style.width= optionTextLength*8 + "px";
  }
}

• Append the options's innerHTML to a span element for measuring width, but then that span clientWidth does not accurate when I apply it's to the select element

export class AppComponent  {
  //This temp is bind to a span via string interpolation {{...}}
  temp:string;

  profileForm = new FormGroup({
    members : new FormControl(''),
  })

  adjustSelectWidth(e){
    const optionValue = this.profileForm.get('members').value;
    const optionText = document.querySelector(`option[value="${optionValue}"]`).innerHTML;
    this.temp = optionText;
    const spanWidth = document.querySelector(`.temp`).clientWidth;
    e.style.width = spanWidth + "px";
  }
}

Since im using angular, i prefer not to use JQuery. Additionally, why the clientWidth seem to not solve my problem here

I created a stackbliz example: https://stackblitz.com/edit/angular-bbimkz

Answer 1

There is a way to measure text width. I think it is sufficiently reliable, but might be a bit expensive in terms of performance, depending on your app of course. (The simplistic example in Stackblitz has no performance problem.)

The method is to actually append a hidden element to the document containing the text you want to measure, read the clientWidth , and remove the element immediately.

Modify adjustSelectWidth() as follows:

adjustSelectWidth(e: HTMLSelectElement){
  // assuming something is always selected, please test!
  const displayedText = e.options[e.selectedIndex].innerText;
  const dummy = document.createElement('div');
  dummy.innerText = displayedText;
  dummy.style.position = 'absolute';
  dummy.style.visibility = 'hidden';
  document.body.insertBefore(dummy, document.body.firstChild);
  const measuredWidth = dummy.clientWidth;
  document.body.removeChild(dummy);
  e.style.width = (measuredWidth + 30) + 'px'
}

Modified Stackblitz: https://stackblitz.com/edit/angular-mpjxbd?file=src/app/app.component.ts - tested in latest Firefox, Chrome, Edge