I'm fairly new to AngularJS and am trying to build a simple login page. Earlier on, I had my CSS and HTML in index.html and my angular js code in app.js. The CSS was defined with 'style' tags in the head section, my form was in the body section, and the angular code was included as a script. The form had displayed as I wanted, and appeared in the middle of the screen. I had also included bootstrap.css as a stylesheet.
I then separated my CSS (styles.css), HTML (index.html), and angularjs (app.js) into three files, and attempted to use routeProvider to glue them all together. However, it seems that the .wrapper CSS class that I defined no longer works on my form, and now the form displays at the top of the screen. What confuses me, is that the Bootstrap CSS still works normally.
Both styles.css and app.js are included in HTML, and the form HTML is being injected through routeProvider.
I'm not sure where I'm going wrong; a quick f12 shows that the styles are present, but the CSS is not displaying the way I want it to.
This is my styles.css:
html {
height:100%
}
body {
height: 100%;
background-image: url('images/calm-background.jpg');
background-size: 100% 100%;
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form-f-border {
border-style: ridge;
background-color: white;
padding-bottom: 15px;
border-radius: 5px;
}
This is my form.html:
<div ng-app="app">
<div class="wrapper">
<div class="container">
<div class="row center-block">
<div class="col-sm-4">
<!-- Empty div for centering purposes -->
</div>
<div class="col-sm-4 form-f-border">
<div class="text-center">
<h2>Log In</h2>
</div>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username-input">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password-input">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div class="col-sm-4">
<!-- Empty div for centering purposes -->
</div>
</div>
</div>
</div>
</div>
This is my app.js:
var app = angular.module('app', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider
.when( '/', {
templateUrl: 'form.html',
controller: 'formController',
})
.otherwise({
redirectTo: '/'
});
});
app.controller('formController', function($scope) {
});
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="styles.css">
<script src="angular/angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="app">
<ng-view></ng-view>
</div>
</body>
</html>
This is what the current page looks like:
I'm hoping to get the form back to the middle of the screen, where it belongs.
Any help would be greatly appreciated. Thank you very much.
