Почему граница не задана в поле ввода?

Я пытаюсь добавить границу в поле ввода. Я могу добавить границу в текстовое поле, но она применяется на всей части. Мне нужно добавить границу только в поле ввода до тех пор, пока не начнется прокрутка символа. Другими словами, если вы начните печатать на поле ввода после нескольких символов, которые он начинает прокручивать по горизонтали. Мне нужно добавить границу до этого, а не всю ширину ввода.Почему граница не задана в поле ввода?

вот мой код http://codepen.io/anon/pen/oXvKeb

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Sign-in, Then Tabs Example</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

    </head> 

    <body> 

    <ion-header-bar class="bar-balanced"> 

    <h1 class="title">Station ID</h1> 


</ion-header-bar> 


<ion-content> 
    <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">StationName</span> 
      <input type="text" ng-model="user.username" class="bdr"> 
     </label> 
     </div> 
</ion-content> 

<ion-footer-bar class="bar-balanced"> 
    <h1 class="title">Footer!</h1> 
</ion-footer-bar> 








    </body> 
</html>

Я добавил класс "БДР"

источник

2015-04-21 user944513

Где находится ваш класс bdr? и где вы называете таблицу стилей? –

, пожалуйста, проверьте мой код. Я добавляю этот класс в css. Http://codepen.io/anon/pen/oXvKeb – user944513

Вы не можете ввести поле, как вы ожидаете. Но вы можете написать собственный код для достижения того, чего вы ожидаете. –

Я думаю, что вы можете сделать это с помощью ng-class и ng-change.

ваше текстовое поле должно быть

Добавьте код в контроллере

 $scope.customClassName=undefined; 
    $scope.changeBorder=function(){ 
     $scope.customClassName=undefined; 
     if(user.username.length>1){ 
     $scope.customClassName="bdr"; 
     }  
}

Если писать какое-либо значение в вашем поле ввода, то функция будет выполнять и проверять состояние, наконец, обновите ng-class до вашего первоначального класса :)

источник

2015-04-21 09:09:27

Почему граница не задана в поле ввода?

ответ

Смежные вопросы