09-09-2019

src/app/cart/cart.page.html

@@ -169,18 +169,20 @@
                 </ion-slides>
             </div>
         </div>
-        <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
-            <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
-            <div class="checkout" (click)="next(1)">CHECKOUT</div>
-        </div>
-        <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
-            PAY
-        </div>
-        <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
-            FINISH
-        </div>
     </div>
 </ion-content>
+<ion-footer>
+    <div class="footer_btnbay" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 0">
+        <div class="continue" (click)="goToPage('productlist')">CONTINUE SHOPING</div>
+        <div class="checkout" (click)="next(1)">CHECKOUT</div>
+    </div>
+    <div class="footer_btn" *ngIf="cartService.carts && cartService.carts.length > 0" [hidden]="currentIndex != 1" (click)="next(2);">
+        PAY
+    </div>
+    <div class="footer_btn" [hidden]="currentIndex != 2" (click)="finishpop()">
+        FINISH
+    </div>
+</ion-footer>
 <!-- <div class="loader">
     <div class="lds-ripple">
         <div></div>

src/app/cart/cart.page.scss

@@ -49,7 +49,7 @@
         .cart_content {
             width: calc(100% - 40px);
             margin: 0 auto;
-            height: 500px;
+            height: calc(100vh - 220px);
             border-radius: 10px;
             background-color: #fff;
             .checkout_list {
@@ -394,54 +394,52 @@
             }
         }
     }
-    .footer_btn {
-        width: 100%;
-        position: fixed;
-        bottom: 0px;
-        z-index: 999;
-        left: 0px;
-        right: 0px;
-        box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+}
+
+.footer_btn {
+    width: 100%;
+    z-index: 999;
+    left: 0px;
+    right: 0px;
+    box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+    background-color: rgba(41, 40, 91, 1);
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+    padding: 15px;
+    font-weight: 300;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+}
+
+.footer_btnbay {
+    width: 100%;
+    box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
+    z-index: 999;
+    left: 0px;
+    right: 0px;
+    border-radius: 15px;
+    .continue {
+        width: 50%;
+        border-top-left-radius: 15px;
+        text-align: center;
+        font-size: 18px;
+        padding: 15px;
+        font-weight: 300;
+        float: left;
+        border-top: 1px solid #d7d5e4;
+        border-left: 1px solid #d7d5e4;
+    }
+    .checkout {
+        width: 50%;
+        border-top-right-radius: 15px;
         background-color: rgba(41, 40, 91, 1);
+        border: 1px solid rgba(41, 40, 91, 1);
         text-align: center;
         color: #fff;
         font-size: 18px;
         padding: 15px;
         font-weight: 300;
-        border-top-left-radius: 15px;
-        border-top-right-radius: 15px;
-    }
-    .footer_btnbay {
-        width: 100%;
-        box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
-        position: fixed;
-        bottom: 0px;
-        z-index: 999;
-        left: 0px;
-        right: 0px;
-        border-radius: 15px;
-        .continue {
-            width: 50%;
-            border-top-left-radius: 15px;
-            text-align: center;
-            font-size: 18px;
-            padding: 15px;
-            font-weight: 300;
-            float: left;
-            border-top: 1px solid #d7d5e4;
-            border-left: 1px solid #d7d5e4;
-        }
-        .checkout {
-            width: 50%;
-            border-top-right-radius: 15px;
-            background-color: rgba(41, 40, 91, 1);
-            border: 1px solid rgba(41, 40, 91, 1);
-            text-align: center;
-            color: #fff;
-            font-size: 18px;
-            padding: 15px;
-            font-weight: 300;
-            float: right;
-        }
+        float: right;
     }
 }
\ No newline at end of file

src/app/productdetail/productdetail.page.html

@@ -42,7 +42,7 @@
                               </label>
                             </button>
                             </li>
-                        </ion-slide>                        
+                        </ion-slide>
                     </ion-slides>
                 </ul>
             </div>
@@ -170,6 +170,9 @@
             </div>
         </div>
     </div>
+
+</ion-content>
+<ion-footer>
     <div class="footer_div">
         <div class="footer_options">
             <button class="share"></button>
@@ -178,4 +181,4 @@
         </div>
         <div class="footer_btn" (click)="cartService.buyNow(product)">BUY NOW</div>
     </div>
-</ion-content>
\ No newline at end of file
+</ion-footer>
\ No newline at end of file

src/app/productdetail/productdetail.page.scss

@@ -279,7 +279,6 @@
 }
 
 .footer_div {
-    position: fixed;
     bottom: 0px;
     height: 50px;
     left: 0px;

src/app/productlist/productlist.page.html

@@ -17,7 +17,7 @@
 
             </div>
             <div class="viewset floatRight">
-                <div class="grid_view grid_act floatRight" (click)="  ()" [class.line_view]="onGrid">
+                <div class="grid_view grid_act floatRight" (click)="gridToggle()" [class.line_view]="onGrid">
                 </div>
                 <div class="clear"></div>
             </div>