검도 각 입력 검도 자동 완성을위한 너비 설정 방법은 무엇입니까?

Question

각도 검도에서 자동 완성 입력의 너비를 설정해야합니다.

프로그래밍 방식으로 어떻게 할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

초기 값으로 설정하면 style="width: 200px;"을 사용해야합니다.

예 :

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

다음을 수정해야하는 경우, 당신은 wrapper 요소에 대한 css 방법을 통해 폭을 변경해야합니다.

예

$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>