ANGULAR 2: Floating button not floating CSS - html

Question

Im very new to frontend development & angular 2. I was trying to program a floating button on the right bottom of the webapp that would allow users to open the shopping cart if needed (cart-button). The problem I have is that the button appears on the screen, put it does not readjust its position once scrolled down, its position is fixed to one spot and it wont move.
HTML:
<md-sidenav-container class="example-container">
<md-sidenav #sidenav class="example-sidenav">
<div class="scroll">
<md-card *ngFor="let ticket of shoppingCart">
<md-card-title>{{ticket.product.name}}</md-card-title>
<md-card-subtitle>$ {{ticket.product.price}}</md-card-subtitle>
<md-card-subtitle>Quantity: {{ticket.quantity}}</md-card-subtitle>
<button md-icon-button (click)="removeProduct(ticket.product)">
<md-icon>delete</md-icon>
</button>
</md-card>
<button md-button class="checkout" (click)="openDialog()">CHECKOUT</button>
</div>
</md-sidenav>
<div id="cart-button">
<button md-icon-button (click)="openNav(sidenav)" id = "cart-button2">
<md-icon>shopping_cart</md-icon>
</button>
</div>
<app-banner *ngIf="!featured"></app-banner>
<form *ngIf="!featured" class="cont">
<md-input-container class="search">
<input mdInput placeholder="Search" type="text" (keyup)="onKeyUp(search.value)" #search>
</md-input-container>
<md-select placeholder="Categories" class="category">
<md-option *ngFor="let category of categories" (click)="change(category)">
{{ category }}
</md-option>
</md-select>
</form>
<md-grid-list cols="5" rowHeight="1:1.4" class="size">
<md-grid-tile *ngFor="let product of products" class="separation">
<md-card class="example-card">
<md-card-header>
<div md-card-avatar class="example-header-image"></div>
<md-card-title>${{product.price}}</md-card-title>
<md-card-subtitle>{{product.name}}</md-card-subtitle>
</md-card-header>
<div class="image-container" [ngStyle]="{'background-image': 'url(' + product.imgUrl + ')'}" [routerLink]="['/product', product.id]">
</div>
<md-card-actions>
<button md-button (click)="addToCart(product.id, 1, sidenav)">ADD TO CART</button>
</md-card-actions>
</md-card>
</md-grid-tile>
</md-grid-list>
<div id="fidget-spinner-container" *ngIf="firstLoad">
<md-spinner id="fidget-spinner" *ngIf="!featured"></md-spinner>
</div>
</md-sidenav-container>
CSS:
.size {
width: 1400px;
margin:100px auto;
}
.example-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.3);
transition: 0.3s;
width: 400%;
border-radius: 5px;
}
.example-card:hover {
box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}
.example-header-image {
background-image: url('https://img2.hkrtcdn.com/1434/prd_143361_c_l.jpg');
background-size: cover;
}
.example-container {
position: relative;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.example-sidenav {
padding: 100px 50px 0 50px;
width: 250px;
}
.checkout {
bottom: 30px;
position: fixed;
}
.image-container {
width: 200px;
height: 200px;
background: white center no-repeat;
background-size: contain;
}
.mat-card-image:first-child {
margin-top: 0 !important;
}
.example-card {
margin:15px;
}
.scroll {
overflow-x: auto;
width:100%;
height:80%;
}
.cont {
width:70%;
padding-right:15%;
padding-left:15%;
padding-top: 330px;
display: inline-flex;
}
.search {
width:70%;
padding-left:10%;
/*margin-left: 30%;*/
/*margin-right: 30%;*/
}
#fidget-spinner {
margin:auto;
padding-bottom:50px;
}
.mat-option {
color: black;
}
#cart-button {
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color: #666666;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
}
.cart-button2 {
margin-top:22px;
}
.category {
padding-right:10%;
padding-top: 10.4px;
width:20%;
}

Answer 1

What I do typically is this in my main module component:
template: `
<div class="container-fluid" [ngStyle]="containerDivSize">
<router-outlet>
</router-outlet>
</div>
`,
So the template above for the container defines the div to be exactly the size of the screen, and by way of setting an Observer on window resize events below, containerDivSize adapts to changes in the window size and orientation, so if the user resizes the window we get the updates. This means we know the exact pixel dimensions of the screen, and we size our containing div to fill the window regardless of any changes.
containerDivSize: any;
constructor(){}
ngOnInit() {
Observable.fromEvent(window, 'resize')
.map(getWindowSize)
.subscribe(
windowSize$ => {
var windowHeight = windowSize$.height;
var windowWidth = windowSize$.width;
this.containerDivSize = {
'height': windowHeight + 'px'
'width': windowHeight + 'px'
}
});
}
You can use this same method to define a button position style that takes the window width and height, subtract the button size and apply it to your button, which will always stay fixed just inside the bottom right corner of the window no matter what the user does (scroll or resize the window).
Maybe something like this:
buttonPosition: any;
var buttonVerticalPosition = windowSize$.height-50;
var buttonHorizontalPosition = windowSize$.width-120;
this.buttonPosition = {
'position': 'absolute',
'top': buttonVerticalPosition + 'px',
'left': buttonHorizontalPosition + 'px'
}
Then add that class to your button.
<button class="btn btn-sm btn-default buttonPosition" >View Cart</button>

Answer 2

The problem is you are using Materal2 which is using transform3D in its style. Due to this relative postion is not working. You should place your button in this component. It takes whatever you put in it and places it in the body.
Other solutions are registering to a scroll event and re-setting the position everytime. This results in poor performance on mobile.