width of move tab detected by screen width

Author: Di Wang

src/app/dashboard/component/wizard/wizard.component.ts

@@ -1,26 +1,49 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+declare const $: any;
 
 @Component({
   selector: 'app-wizard',
   templateUrl: './wizard.component.html',
   styleUrls: ['./wizard.component.css']
 })
-export class WizardComponent implements OnInit {
+export class WizardComponent implements OnInit, AfterViewInit {
   tabIndex = 0;
   constructor() { }
 
   ngOnInit() {
+  }
+  ngAfterViewInit() {
     const preBtn = <HTMLElement>document.getElementById('preBtn');
+    const moveTab = <HTMLElement>document.querySelector('.move-tab');
     preBtn.style.visibility = 'hidden';
+    // to ensure moveTab can stay correct position
+    $(window).resize(() => {
+      const screenWidth = document.body.clientWidth;
+      if (screenWidth > 990) {
+        if (this.tabIndex === 1) {
+          moveTab.style.left = '20vw';
+          console.log('111');
+        } else if (this.tabIndex === 2) {
+          moveTab.style.left = '41vw';
+        }
+      } else {
+        if (this.tabIndex === 1) {
+          moveTab.style.left = '30vw';
+        } else if (this.tabIndex === 2) {
+          moveTab.style.left = '61.5vw';
+        }
+      }
+    });
   }
 
   preOnClick() {
     const moveTab = <HTMLElement>document.querySelector('.move-tab');
     const nextBtn = <HTMLElement>document.getElementById('nextBtn');
     const preBtn = <HTMLElement>document.getElementById('preBtn');
+    const screenWidth = document.body.clientWidth;
     if (this.tabIndex === 2) {
       this.tabIndex--;
-      moveTab.style.left = '20vw';
+      moveTab.style.left = screenWidth > 990 ? '20vw' : '30vw';
       nextBtn.style.visibility = 'visible';
       moveTab.innerHTML = 'Account';
     }else if (this.tabIndex === 1) {
@@ -35,14 +58,15 @@ export class WizardComponent implements OnInit {
     const moveTab = <HTMLElement>document.querySelector('.move-tab');
     const nextBtn = <HTMLElement>document.getElementById('nextBtn');
     const preBtn = <HTMLElement>document.getElementById('preBtn');
+    const screenWidth = document.body.clientWidth;
     if (this.tabIndex === 0) {
       this.tabIndex++;
-      moveTab.style.left = '20vw';
+      moveTab.style.left = screenWidth > 990 ? '20vw' : '30vw';
       preBtn.style.visibility = 'visible';
       moveTab.innerHTML = 'Account';
     }else if (this.tabIndex === 1) {
       this.tabIndex++;
-      moveTab.style.left = '41vw';
+      moveTab.style.left = screenWidth > 990 ? '41vw' : '61.5vw';
       nextBtn.style.visibility = 'hidden';
       moveTab.innerHTML = 'Address';
     }