0

I have selects that sometimes have a long string in it and sometimes it cut off, in that cases I want to put a tooltip on them but I don't want to show the tooltip if the text is fully showed inside the select.

Is there any validation to this using Angular?

João Silva
  • 531
  • 4
  • 21
  • 40

2 Answers2

0

From: HTML text-overflow ellipsis detection

You could try using this:

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}
UmeshKathirvel
  • 14
  • 6
  • Didn't work on Angular, offsetWidth and scrollWidth came out as undefined... going to check what comes in the event to check if I can get it work someway – João Silva Apr 03 '18 at 16:56
0

Ok, got it. If you are using a vanilla select, you can try the following. Worked for me perfectly. The key is to wrap your <option> with a <span> to get the texts actual pixel width

Html:

<select id="select" (change)="debug()" style="max-width:200px">
  <option>
    <span>
        Blalalalalalalalallalaalalalalalalalallaallalalalalaal
    </span>
  </option>
  <option>
    <span>
        Blalalallalalalalalalalalalallaal
    </span>
  </option>
  <option>
    <span>
        Blalalalalala
    </span>
  </option>
</select>

TS:

  debug() {
    const el = document.querySelector('#select');
    for (let i = 0; i < el['options'].length; i++) {
      if (this.isEllipsisActive(el['options'][i])) {
        console.log('cause offset', el['options'][i]);
      }
    }
  }
  isEllipsisActive(e) {
    if (e.children[0].scrollWidth > document.querySelector('#select').scrollWidth) {
      return true;
    }
    return false;
  }
Sebastian Münster
  • 447
  • 3
  • 14