What could be causing the input field to not have a border set?

I am attempting to add a border to my input field. I have successfully added the border to the text field, but it is being applied across the entire width. I would like the border to only appear on the input field up to where the characters start scrolling. In other words, when typing in the input field and the characters exceed the visible area, I want the border to only cover that portion, not the whole width of the 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 have added the class "bdr" for this purpose

Answer №1

To achieve this, you can utilize the directives ng-class and ng-change.

Your text field should look like this:

Include the following code in your controller:

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

When input values are entered into your field, the function will trigger, evaluate the condition, and then update the ng-class to apply the original class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining numbers of identical precedence levels in JavaScript/jQuery

Suppose I have an array stored as follows: [1,2,3,4,5,6,7,9] My desired output is a string containing: "{1 to 7;9}" Currently, my code looks like this: var _checkbox = [1,2,3,4,5,6,7,9]; for (i=0; i<_checkbox.length; i++) { //if ($($(_checkbox) ...

Adjusting the value of a user form with multidata in PHP and Javascript

I am looking for guidance on how to modify the value of an input in a form that contains multiple data entries. Here is my form: <form method="post" action="pax-flight.php#pax-flight" class="paxform"> <input type="hidden" value="{"data":{"us ...

Creating child rows with forms in Datatables

Currently, I am utilizing this particular example where I have a form embedded within the child rows. However, I have encountered an issue - the input from the child rows is not being submitted if the child rows are closed. Upon further examination, I noti ...

Increase and decrease the size of a table row in real-time

I am attempting to create a bootstrap table in which clicking a button in the first column will expand the specific row to show more details. I am aiming for a result similar to what can be found at this link, but without using the DataTables framework. ...

Retrieve the value of an object without relying on hardcoded index values in TypeScript

I am working with an object structure retrieved from an API response. I need to extract various attributes from the data, which is nested within another object. Can someone assist me in achieving this in a cleaner way without relying on hardcoded indices? ...

Struggling to retrieve JSON object sent to PHP using POST

I apologize if this question has already been asked. I have searched for a solution but nothing has worked for me yet. I am attempting to send a large JSON object to a PHP file using the POST method. Below is my JavaScript code : var grid = { ...

The system is unable to locate the Error Files following the command "grunt serve:dist"

After adding only two additional files to the end of scripts/Auth/authCtrl.js and scripts/Auth/authService.js, everything was working fine on development. However, when running the dist version, it indicates that all those files are missing. Please assist ...

Ways to transmit information from a React application to a Node server

As a Nodejs beginner, I am using the rtsp-relay library for live streaming. Currently, it is working in the frontend when the URL is included in the server proxy object like this: rtsp://.....@..../Stream/Channel/10. However, I want users to be able to inp ...

Creating an Ionic button within a list item that does not use ui-sref for navigation

For my project, I have set up an ionic list that uses ui-sref to navigate to a specific page when an item is clicked. Additionally, I have included a button on each list item in the top-right corner that acts as a toggle (similar to a bookmark). The issue ...

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

Troubles with using the Map function on JSON objects in ReactJS

I am currently working with React using TypeScript. I have an external JSON file that contains data needed to generate elements on the front end. There is also a button, and I want the elements to be created only when the user enables this button. However, ...

Argument for setInterval function

As a newcomer to programming, I am attempting to develop a basic javascript game. I have encountered an issue with the window.setInterval function and it seems to be causing everything to malfunction. I have been following a tutorial at this link and att ...

The icon is not being displayed when the onHover event on the Material UI component is triggered

I am currently working on adding a delete icon to a Material UI MenuItem component. I've created a state field within the component's state called isHovering, which is initially set to false. The goal is to display the delete icon when hovering o ...

Invoke the onload event from document.ready using jQuery

Is it possible to trigger the onload event from within jQuery's document.ready function, such as in the example below: $(function() { onloadfunc(param); }); Comparison: <body onload = "onloadfunc(param);"> Do the above two methods achieve th ...

Unique ActionBar design for my NativeScript-Vue application

I'm currently working on customizing the ActionBar for my nativescript-vue app. I have implemented FlexBoxLayout within the ActionBar, but I am facing an issue where the icon and title of the bar are not aligning to the left as intended; instead, they ...

Dealing with 401 errors in your entire AngularJS application

One of my Controllers contains the following code to handle a 401 error gracefully: ChannelsService.query(function(response) { $scope.channels = response; }, function(error) { if (error.status == 401) { $state.go('login'); } ...

Turbolinks not allowing the addition of JavaScript classes for background images

While trying to merge a front end html theme with my Laravel app, I encountered an issue with turbolinks that is preventing Javascript from appending div classes. This is resulting in background images only being displayed on page refresh. <div class= ...

Utilizing AngularJS to implement a Currency Filter on the output of a personalized filter

I'm currently working on a custom filter that transforms zero values into ' - ' for display purposes. The goal is to display currency formatting for non-zero values. However, I encountered an unexpected token error while trying to implement ...

How can you craft a dynamic radial mask to animate layered images?

My goal is to have two circular SVG images layered on top of each other, with the top image in grayscale and the bottom image in full color. I want to be able to gradually remove the top image based on a percentage from 1-100, similar to how hands sweep a ...

PHP scheduler alternative

I have a PHP script called updater.php that performs a task for 1-2 minutes. It is crucial for the script to complete its job. While I can schedule it with cron, I have come up with an alternative solution. The script should only run at specific times wh ...