Weird HTML поведение

Question

У меня есть эта страница:

И, когда я пытаюсь зарегистрировать без каких-либо полей, он правильно отображает ошибки так:

Однако, в то время как Я тестировал, я вставил один случайный символ в каждое поле и нажал регистр, и это тот экран, который я получил (обратите внимание, что ошибка верна, но это испортило мой HTML):

Вот код AngularJS контроллер:

app.controller('registerController', ['$scope', '$location', '$http', 'cssInjector', function ($scope, $location, $http, cssInjector) { 
    cssInjector.add('css/index.css'); 

    $scope.user = {}; 
    $scope.errors = []; 

    $scope.home = function() { 
     $location.path('/'); 
    }; 

    $scope.submit = function() { 

     $http.post('/users', $scope.user).then(function (data) { 
      console.log('success'); 
      console.log(data); 
     }, function (errors) { 
      console.log('error'); 
      console.log(errors); 

      $scope.errors = []; 

      var errorsObject = errors.data.errors; 

      for(var index in errorsObject) { 
       console.log(index); 
       $scope.errors[errorsObject[index].path] = errorsObject[index].message; 
      } 

      console.log($scope.errors); 
     }); 

    }; 
}]); 

Вот запрос обрабатывается Node.js:

app.post('/users', function (request, response) { 
    var body = _.pick(request.body, 'full_name', 'email', 'password', 'repeat_password'); 

    body.rank = 0; 

    body.full_name = body.full_name || ''; 
    body.email = body.email || ''; 
    body.password = body.password || ''; 
    body.repeat_password = body.repeat_password || ''; 

    var errors = { 
     errors: [ 

     ] 
    }; 

    if (body.full_name.length === 0) { 
     errors.errors.push({ 
      message: 'The full name field cannot be empty.', 
      path: 'full_name' 
     }); 
    } 

    if (body.email.length === 0) { 
     errors.errors.push({ 
      message: 'The email field cannot be empty.', 
      path: 'email' 
     }); 
    } 

    if (body.password.length === 0) { 
     errors.errors.push({ 
      message: 'The password field cannot be empty.', 
      path: 'password' 
     }); 
    } 

    if (body.repeat_password.length === 0) { 
     errors.errors.push({ 
      message: 'The repeat password field cannot be empty.', 
      path: 'repeat_password' 
     }); 
    } 

    if (errors.errors.length > 0) { 
     response.status(400).json(errors).send(); 
    } else { 
     if (body.password === body.repeat_password) { 
      delete body.repeat_password; 

      database.users.create(body).then(function(data) { 
       response.send('Successfully created!'); 
      }).catch(function (errors) { 
       response.status(400).json(errors).send(); 
      }); 
     } else { 
      var error = { 
       errors: [ 
        { 
         message: "Repeated password does not match the previous.", 
         path: "repeat_password" 
        } 
       ] 
      }; 
      response.status(400).json(error).send(); 
     } 
    } 
}); 

И HTML код для этой конкретной формы:

 <h1 class="main-title animated zoomInUp">HassanAlthaf.com</h1> 

     <form novalidate class="index-form animated slideInLeft" data-ng-submit="submit()"> 
      <input type="text" data-ng-model="user.full_name" placeholder="Your full name"> 
      <p class="error">{{errors['full_name']}}</p> 
      <input type="text" data-ng-model="user.email" placeholder="Your email address"> 
      <p class="error">{{errors['email']}}</p> 
      <input type="password" data-ng-model="user.password" placeholder="Choose a password"> 
      <p class="error">{{errors['password']}}</p> 
      <input type="password" data-ng-model="user.repeat_password" placeholder="Repeat your password"> 
      <p class="error">{{errors['repeat_password']}}</p> 
      <div class="row"> 
       <button type="submit" class="button-green">Register</button> 
       <button type="button" class="button-red pull-right" data-ng-click="home()">Home</button>  
      </div> 
     </form> 

И, плавник союзник, соответствующий код CSS:

@import url(https://fonts.googleapis.com/css?family=Lato:100italic,100,400,700); 

* { 
    box-sizing: border-box; 
} 

body { 
    background: #34495E; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

.main-title { 
    font-size: 45px; 
    padding: 0; 
    margin: 0 0 30px 0; 
    text-align: center; 
    color: #FFFFFF; 
    font-family: 'Lato', sans-serif; 
    font-weight: 100; 
} 

.index-form { 
    margin: 0 auto; 
} 

.index-form input, .index-form button { 
    display: block; 
} 

.index-form input { 
    padding: 8px; 
    border-radius: 5px; 
    outline: none; 
    border: 2px solid #2E4153; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    font-size: 14px; 
    text-align: center; 
    width: 30%; 
    margin: 0 auto 10px auto !important; 
} 

.index-form input:focus { 
    border: 2px solid #22303D; 
} 

.red-border { 
    border: 2px solid #C0392B; 
} 

.index-form .row { 
    width: 30%; 
    margin: 0 auto; 
} 

.index-form button { 
    width: 45%; 
    display: inline-block; 
    padding: 0; 
    padding: 8px; 
    border-radius: 40px; 
    outline: none; 
    font-family: 'Lato', sans-serif; 
    font-size: 14px; 
    font-weight: 400; 
    background: #FFFFFF; 
    transition: 0.3s background, 0.3s color; 
} 

.button-green { 
    border: 2px solid #27AE60; 
    color: #27AE60; 
} 

.button-green:hover { 
    background: #27AE60; 
    color: #FFFFFF; 
} 

.button-green:active { 
    background: #219251; 
    color: #FFFFFF; 
    border: 2px solid #219251; 
} 

.button-red { 
    border: 2px solid #C0392B; 
    color: #C0392B; 
} 

.button-red:hover { 
    background: #C0392B; 
    color: #FFFFFF; 
} 

.button-red:active { 
    background: #A43125; 
    color: #FFFFFF; 
    border: 2px solid #A43125; 
} 

.error { 
    color: #C0392B; 
    text-align: center; 
} 

/* Big tablet to 1200px */ 
@media only screen and (max-width: 1200px) { 
    .index-form input, .index-form .row { 
     width: 30%; 
    } 
} 

/* Small tablet to big tablet: from 768px to 1023px */ 
@media only screen and (max-width: 1023px) { 
    .index-form input, .index-form .row { 
     width: 40%; 
    } 
} 

/* Small phones to small tablets: from 481px to 767px */ 
@media only screen and (max-width: 767px) { 
    .index-form input, .index-form .row { 
     width: 90%; 
    } 
} 

/* Small phones: from 0 to 480px */ 
@media only screen and (max-width: 480px) { 
    .index-form input, .index-form .row { 
     width: 90%; 
    } 

Такое поведение довольно странно, и я бы очень признателен за любую помощь. Хорошо объясненные ответы получат щедрость от меня.

Answer 1

Как @epascarello предложил, я просто завернутые каждый элемент внутри: <div class="row">....</div>

Это работало отлично для меня.