My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribute to set tooltips for option tags where the offsetWidth exceeds the scrollWidth. This solution works perfectly in Chrome, but in IE 11, the values of offsetWidth and scrollWidth are always zero. I am seeking an alternative method to calculate these values. Any suggestions or insights would be greatly appreciated.
<!DOCTYPE html>
<html>
<style type="text/css>
.selectField {
width: 100px !important;
}
</style>
<script type="text/javascript">
function updateTooltip() {
var element = document.getElementById('selectField');
for (var i = 0; i < element.length; i++) {
if (element.options[i].offsetWidth < element.options[i].scrollWidth) {
element.options[i].title = element.options[i].label;
}
}
}
</script>
<body>
<select multiple class="selectField" id="selectField">
<option>One Two Three Four Five Six</option>
<option>One</option>
<option>Two </option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>One Two Three Four Five Six</option>
<option>One</option>
<option>Two </option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>One Two Three Four Five Six</option>
<option>One</option>
<option>Two </option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>
<button onClick="updateTooltip()">Apply Tooltip</button>
</body>
</html>Please refer to the functioning example in the following Plunker link: https://plnkr.co/edit/b9cFuUDXSt4wgcxql3ga?p=preview