CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-3
Aaron
Aaron

Reputation: 1455

Bootstrap classes causing input element to move to next line

When I add the classes has-error and has-success to the closest div, why does it make the input element #confirmPassword move to the next line?

HTML -

<form method = "post" action = "" ng-controller = "resettingCtrl as reset">

  <div class="form-group row">
    <label for="password" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password" ng-model="reset.password">
    </div>
  </div>

  <div class="form-group row">
    <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" ng-model="reset.confirmPassword">
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-info">Submit</button>
    </div>
  </div>

</form>

JS-

'use strict';

angular.module('Att1App')
    .controller('resettingCtrl', resettingCtrl);

  function resettingCtrl() {   
    var self = this;

    self.pass = "";
    self.confirmPass = "";

    angular.element(document.getElementById("confirmPassword")).on("input", function () {

        if(self.pass != document.getElementById("confirmPassword").value) {

                var div1 = document.getElementById('confirmPassword').closest('div');
                //div1.className = "has-error";
                return false;
            }

            else {

                var div2 = document.getElementById('confirmPassword').closest('div');
                div2.className = "has-success";
                return true; 
            }
        });
    }

Upvotes: 1

Views: 127

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

When you try to add the has-success class to the div in this way:

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className = "has-success";

You delete the previous div classes. In this case it loses the col-sm-10 class which was responsible for its width and that's why the input grows bigger and moves to the next line

Change your code to:

var div2 = document.getElementById('confirmPassword').closest('div');
div2.className += " has-success";

Or use jQuery if you load it:

$("#confirmPassword").closest('div').addClass("has-success");

Both approaches will add the new class to the div but will also preserve the existing classes.

Upvotes: 1

Related Questions