why the border not set on input field?

Question

I try to add border on my input field .I am able to add the border on text field but it apply on whole portion .I need to add border to only the input field till where character start scrolling.In other word if you start typing on input field after few characters it start scrolling horizontally I need to add border up to that , not to whole width of input .

here is my code 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>

I added class "bdr"

Where is your bdr class? and where you call the style sheet? — Ramesh Rajendran, Apr 21 '15 at 09:00
please check my code I add that class on css http://codepen.io/anon/pen/oXvKeb — user944513, Apr 21 '15 at 09:01
You can't input field like you expect. But you can write custom code to achieve what you expect — Vigneswaran Marimuthu, Apr 21 '15 at 09:01
You can make elements other than an `input` editable, and add custom styling/behavior to your liking http://stackoverflow.com/questions/8956567/how-do-i-make-an-editable-div-look-like-a-text-field — Dpeif, Apr 21 '15 at 09:04

score 0 · Answer 1 · answered Apr 21 '15 at 09:09

I think you can do it by using ng-class and ng-change.

your text field should be

Add some code in your controller

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

If you write any values in your input field, then the function will execute and check the condition, finally update the ng-class to your original class :)

why the border not set on input field?

1 Answers1