Adjust the width of the input box from the first loading of a page

Question

I followed this thread to make an input field with flexible width: JSBin:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="YourApp"> 
  <div ng-controller="YourController">
     <div edit-inline>
        <input id="flexibleInput" ng-model="title" ></input>
        <span id="flexibleDummy" style="visibility:hidden; position:absolute; left:-1000px; top:-1000">blblapx</span>
     </div>
  </div>
  <script type="text/javascript"> 
    angular.module('YourApp', [])
    .controller('YourController', ['$scope', function ($scope) {
      $scope.title = "very very vry very very very very very very very long"
    }])
    .directive("editInline", function(){
        return function(scope, element, attr){
            var elInput = element.find('#flexibleInput');
            var elDummy = element.find('#flexibleDummy');
            var inputText = elInput.val();
            elInput.bind("keydown keyup", function(){
                var inputText = elInput.val();
                elDummy.html(inputText);
                option1 = elDummy[0].offsetWidth;
                elInput.css('width', option1 + 'px');
            });
        }
    });
  </script> 
</body>
</html>

The problem is when the page is loaded for the first time, the width of the input box is not adjusted; we need to modify its content to trigger the adjustment.

Does anyone know how to fix this?

score 1 · Accepted Answer · answered Aug 01 '17 at 13:47

You could use $timeout to trigger your changes in next digest cycle.(check the snippet working)

angular.module('YourApp', [])
  .controller('YourController', ['$scope', function($scope) {
    $scope.title = "very very vry very very very very very very very long"
  }])
  .directive("editInline", function($timeout) {
    return function(scope, element, attr) {
      var elInput = element.find('#flexibleInput');
      var elDummy = element.find('#flexibleDummy');
      var inputText = elInput.val();
      elInput.bind("keydown keyup", function() {
        scope.modFun();
      });
      scope.modFun = function() {
        var inputText = elInput.val();
        elDummy.html(inputText);
        option1 = elDummy[0].offsetWidth;
        elInput.css('width', option1 + 'px');
      }
      $timeout(function () {
         scope.modFun();
      });
      
    }
  });

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="YourApp">
  <div ng-controller="YourController">
    <div edit-inline>
      <input id="flexibleInput" ng-model="title" />
      <span id="flexibleDummy" style="visibility:hidden; position:absolute; left:-1000px; top:-1000">blblapx</span>
    </div>
  </div>

</body>

</html>

Adjust the width of the input box from the first loading of a page

1 Answers1