As I was working on creating a login page within Angular, I initially included the code in the app.component.html file like this:
app.component.ts
<div class="container">
<app-login></app-login>
</div>
The corresponding CSS looked like this:
login.css
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group label {
display: block;
margin: 0 0 5px 0;
}
app.component.css
.container {
display: grid;
height: 100%;
}
app-login {
width: 100%;
max-width: 274px;
place-self: center;
}
However, after implementing routing in my application, I switched to using the <router-outlet> component to display the login page, which caused the CSS styling to no longer appear as intended...
app.component.ts
<div class="container">
<router-outlet></router-outlet>
</div>
Do check out the following stackblitz for a live example.
Update I have managed to resolve the missing CSS issue (see below).
However, it seems that something is causing the content to be pushed downward. How can I adjust the CSS to restore the original layout?