I am trying to center align my checkboxes, when you add a new input this is how they are displayed now: checkboxes not aligned well . This is the code I am using (angular and bootstrap):
<div class="container text-center">
<form ng-submit="todoAdd()">
<input type="text" ng-model="todoInput" size="50" placeholder="Add New">
<input type="submit" class="btn btn-success" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
<p><button ng-click="remove()">Remove marked</button></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
$scope.todoList = [{todoText:'Clean House', done:false}];
$scope.todoAdd = function() {
$scope.todoList.push({todoText:$scope.todoInput, done:false});
$scope.todoInput = "";
};
$scope.remove = function() {
var oldList = $scope.todoList;
$scope.todoList = [];
angular.forEach(oldList, function(x) {
if (!x.done) $scope.todoList.push(x);
});
};
});
</script>
I am wondering is there any way to align the boxes vertically (in the center of the page) maybe with bootstrap or any other suggestion would be helpful? This is my first question so I apologize in advance if it's not formulated right, and I thank you in advance for the answers!
Aucun commentaire:
Enregistrer un commentaire