I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display.
https://i.sstatic.net/YQrL5.png
However, when I resize the browser window, the responsiveness seems to break.
https://i.sstatic.net/4S5iy.png
Below are the HTML and SCSS snippets for reference. Can someone help me figure out what is going wrong here? Thanks in advance!
$ ng -v
Angular CLI: 1.6.1
Node: 8.9.4
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.10.0
admin-login.component.html
<div class="container">
<div class="row">
<div class="Absolute-Center is-Responsive ">
<form (submit)="loginUser($event)">
<div class="input" >
<label>Username</label>
<input class="btn-block" type="text">
</div>
<div class="input">
<label>Password</label>
<input class="btn-block" type="password">
</div>
<br/>
<div class="input">
<input class="btn btn-success btn-lg btn-primary btn-block btn-signin" type="submit" value="Login">
</div>
</form>
<br/>
<div>
<a href="#" class="forgot-password float-left" style="font-size:20px">
Forgot Password
</a>
<a href="#" class="forgot-password float-right" style="font-size:20px">
Register
</a>
</div>
</div>
</div>
</div>
admin-login.component.scss
:host {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
div.input {
position: relative;
}
div.input label {
position: absolute;
top: 0;
transform: translateY(-50%);
left: 10px;
background: white;
font-size: 20px;
padding: 5px 2px;
}
div.input input {
padding: 10px 15px;
font-size: 25px;
outline: 0;
}
div.input {
margin-top: 20px;
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Responsive {
width: 50%;
height: 50%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}
UPDATE
Big thanks to @WebDevBooster for their insights! Following the guidance from https://getbootstrap.com/docs/4.0/layout/grid/ helped me address the alignment issue with my form and now everything is working smoothly.