Is there any way to make select width as long as the current option chosen?

Question

Is there any way to make the width of the option change according to what's being displayed so that the select arrow isn't so far when someone picks one of the shorter options?

<select>
  <option value="all">Choose one</option>
  <option value="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
  <option value="2">bbbbbbbbbbbbbbb</option>
  <option value="3">cccc</option>
  <option value="4">ddd</option>
  <option value="5">ee</option>
  <option value="6">f</option>
</select>

@0stone0 the selected answer is in jquery which I don't know — illyria, Apr 20 '22 at 08:46
i wouldnt recommend changing its width since will impact other components and probably will overflow outside containers plus is not a good user experience, u can add a fixed width and add overflow: elipsis [https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) — codmitu, Apr 20 '22 at 08:53
@illyria I've added [a new js-only answer](https://stackoverflow.com/a/71937228/5625547) on the linked duplicate. Hope it helps. — 0stone0, Apr 20 '22 at 09:27

score 1 · Accepted Answer · answered Apr 20 '22 at 09:07

Transforming a jquery answer to vanilla js, you need sth like this

function changeWidth() {
  let ghostSelect = document.createElement('select');
  const select = document.getElementById('select');
  var x = select.options[select.selectedIndex].text;
  
  const ghostOption = document.createElement("option");
  ghostOption.setAttribute("value", x);
  var t = document.createTextNode(x);
  ghostOption.appendChild(t);
  ghostSelect.appendChild(ghostOption);
  window.document.body.appendChild(ghostSelect)
  select.style.width = ghostSelect.offsetWidth + 'px';
    window.document.body.removeChild(ghostSelect)
}

    <select id="select" onChange="changeWidth()">
        <option value="all">Choose one</option>
        <option value="1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
        <option value="2">bbbbbbbbbbbbbbb</option>
        <option value="3">cccc</option>
        <option value="4">ddd</option>
        <option value="5">ee</option>
        <option value="6">f</option>
    </select>

So what it actually does is that it creates a dummy select with only the selected option, adds it temporarily to the DOM, then calculates the width, sets the original's select width to the new width and then it removes the dummy select from the DOM.

It's worth noting that any differnces in the styles of the original `select` and the "ghost" `select` may result in inconsistent results. So make sure to apply the same classes to the ghost element and/or append to the same location as the original (depending on your styling selectors, different approaches may be needed) — DBS, Apr 20 '22 at 09:13
of course. the sample was as simple as the original `select` in the post! — Apostolos, Apr 20 '22 at 09:15
You can better post this on the marked duplicate so that can be used as a refference. — 0stone0, Apr 20 '22 at 09:16

Is there any way to make select width as long as the current option chosen?

1 Answers1