How to set width for Kendo Angular input kendo-auto-complete?

Question

I need to set width of the autocomplete input in the Angular Kendo.

How can i do it programatically please?

Thanks for any help.

Answer 1

Setting it with an initial value, you should use style="width: 200px;".

Example:

<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames"  style="width: 200px" />

If then you need to modify it, you should change the width via css method for wrapper element.

Example

$scope.my_autocomplete.wrapper.css("width", "300px");

  angular.module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){
    $scope.countryNames = [
      "Albania",
      "Andorra",
      "Armenia",
      "Austria",
      "Azerbaijan",
      "Belarus",
      "Belgium",
      "Bosnia & Herzegovina",
      "Bulgaria",
      "Croatia",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Estonia",
      "Finland",
      "France",
      "Georgia",
      "Germany",
      "Greece",
      "Hungary",
      "Iceland",
      "Ireland",
      "Italy",
      "Kosovo",
      "Latvia",
      "Liechtenstein",
      "Lithuania",
      "Luxembourg",
      "Macedonia",
      "Malta",
      "Moldova",
      "Monaco",
      "Montenegro",
      "Netherlands",
      "Norway",
      "Poland",
      "Portugal",
      "Romania",
      "Russia",
      "San Marino",
      "Serbia",
      "Slovakia",
      "Slovenia",
      "Spain",
      "Sweden",
      "Switzerland",
      "Turkey",
      "Ukraine",
      "United Kingdom",
      "Vatican City"
    ];

    setTimeout(function() {
      alert("Changing width");
      $scope.my_autocomplete.wrapper.css("width", "300px");
    }, 4000);

  });

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content" ng-controller="MyCtrl">
    <input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames"  style="width: 200px" />
  </div>
</div>