JSFiddle - React, Tailwind, and code Playground

by Nilesh Ramteke

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
       <select>
					<option 
						ng-repeat="x in data" 
						title="{{x.title}}" 
						dropdown-size-handler>
							{{x.text}}
					</option>
				</select> 
        <div>
          <span></span>
        </div>
  </div>
</div>

CSS

.container {
			width: 100%;
		}
		select {
			width: 100%;
		}

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.data = [{
      text: "Custom drop down field number 123456789 Custom drop down field number 123456789",
      title: "Custom drop down field number 123456789 Custom drop down field number 123456789",
      value: "o1"
    },
    {
      text: "option 2",
      title: "option 2",
      value: "o2"
    },
    {
      text: "option 3",
      title: "option 3",
      value: "o3"
    },
  ];
});

app.directive('dropdownSizeHandler', function($timeout, $window) {
  return {
    restrict: 'A',
    link: function($scope, $element, attrs) {
      var addDummy = function(text) {
        var dummyDiv = document.createElement("div");
        var textNode = document.createTextNode(text);
        dummyDiv.appendChild(textNode);
        dummyDiv.style["display"] = "inline-block";
        dummyDiv.style["font"] = "400 13.3333px Arial";
        dummyDiv.style["padding-left"] = "5px";
        dummyDiv.style["position"] = "fixed";
        dummyDiv.style["top"] = "-100px";
        dummyDiv.classList.add("dummy-element");
        document.body.appendChild(dummyDiv);
        return dummyDiv;
      }
      var removeAllDummies = function() {
        var elems = document.getElementsByClassName("dummy-element");
        for (var i = 0; i < elems.length; i++) {
          document.body.removeChild(elems[i]);
        }
        if (elems.length) {
          removeAllDummies();
        }
      }
      var resizeOptions = function(element) {
        var text = $scope.x.title;
        var dummyDiv = addDummy(text);

        var dummyDivWidth = angular.element(dummyDiv)[0].offsetWidth;

        if (element.parentElement.offsetWidth < dummyDivWidth) {
          var selectDisplayAreaWidth = element.parentElement.offsetWidth - 18;
          var done = false,
            d = 3;
          while (!done) {
            var maxLength = (text.length - d) <= 0 ? 1 : text.length - d;
            var newText =...