From 9bc627e9242936fbf41154971bebc927867b15e9 Mon Sep 17 00:00:00 2001
From: asvae <ontrew@gmail.com>
Date: Wed, 18 Apr 2018 15:01:31 +0300
Subject: [PATCH] IE11 fixes (#155)

* IE11 fixes

* Fix dashboard link

* Remove border for inner tooltip container (looked weird in IE11)

* Minor

* Minor
---
 package.json                                  |   1 +
 .../forms/form-wizard/FormWizard.vue          | 273 ++++++++++++------
 src/components/layout/navbar/Navbar.vue       |   4 +-
 .../ui/tree-view/TreeViewEditablePreview.vue  |   2 +-
 src/main.js                                   |   6 +
 src/sass/_override-custom-libs.scss           |   1 +
 .../vuestic-wizard/VuesticWizard.vue          |   1 +
 yarn.lock                                     |   4 +
 8 files changed, 198 insertions(+), 94 deletions(-)

diff --git a/package.json b/package.json
index 1360aecd1..2a8999512 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "connect-history-api-fallback": "1.3.0",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.28.0",
+    "es6-promise": "^4.2.4",
     "eslint": "3.19.0",
     "eslint-config-standard": "10.2.1",
     "eslint-friendly-formatter": "3.0.0",
diff --git a/src/components/forms/form-wizard/FormWizard.vue b/src/components/forms/form-wizard/FormWizard.vue
index 9e09f3aa0..24f703824 100644
--- a/src/components/forms/form-wizard/FormWizard.vue
+++ b/src/components/forms/form-wizard/FormWizard.vue
@@ -2,14 +2,21 @@
   <div class="form-wizard-page">
     <div class="row">
       <div class="col-md-12">
-        <vuestic-widget class="no-h-padding" :headerText="$t('forms.wizard.simple')">
+        <vuestic-widget class="no-h-padding"
+                        :headerText="$t('forms.wizard.simple')">
           <vuestic-wizard
             :steps="hsSteps">
             <div slot="page1" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
-              <div class="form-group with-icon-right" :class="{'has-error': errors.has('hsName'), 'valid': isFormFieldValid('hsName')}">
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
+              <div class="form-group with-icon-right"
+                   :class="{'has-error': errors.has('hsName'), 'valid': isFormFieldValid('hsName')}">
                 <div class="input-group">
                   <input
                     name="hsName"
@@ -17,17 +24,26 @@
                     v-model="hsName"
                     v-validate="'required'"
                     required title=""/>
-                  <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
+                  <i
+                    class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
                   <i class="fa fa-check valid-icon icon-right input-icon"></i>
-                  <label class="control-label">{{'forms.wizard.name' | translate}}</label><i class="bar"></i>
-                  <small v-show="errors.has('hsName')" class="help text-danger">{{ errors.first('hsName') }}</small>
+                  <label class="control-label">{{'forms.wizard.name' |
+                    translate}}</label><i class="bar"></i>
+                  <small v-show="errors.has('hsName')" class="help text-danger">
+                    {{ errors.first('hsName') }}
+                  </small>
                 </div>
               </div>
             </div>
             <div slot="page2" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
               <vuestic-simple-select
                 label="Select country"
                 v-model="hsCountry"
@@ -40,17 +56,23 @@
             <div slot="page3" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
             <div slot="wizardCompleted" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.completed' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
           </vuestic-wizard>
@@ -60,15 +82,22 @@
 
     <div class="row">
       <div class="col-md-12">
-        <vuestic-widget class="no-h-padding" :headerText="$t('forms.wizard.rich')">
+        <vuestic-widget class="no-h-padding"
+                        :headerText="$t('forms.wizard.rich')">
           <vuestic-wizard
             :steps="hrSteps"
             wizard-type="rich">
             <div slot="page1" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
-              <div class="form-group with-icon-right" :class="{'has-error': errors.has('hrName'), 'valid': isFormFieldValid('hrName')}">
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
+              <div class="form-group with-icon-right"
+                   :class="{'has-error': errors.has('hrName'), 'valid': isFormFieldValid('hrName')}">
                 <div class="input-group">
                   <input
                     name="hrName"
@@ -76,17 +105,26 @@
                     v-model="hrName"
                     v-validate="'required'"
                     required title=""/>
-                  <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
+                  <i
+                    class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
                   <i class="fa fa-check valid-icon icon-right input-icon"></i>
-                  <label class="control-label">{{'forms.wizard.name' | translate}}</label><i class="bar"></i>
-                  <small v-show="errors.has('hrName')" class="help text-danger">{{ errors.first('hrName') }}</small>
+                  <label class="control-label">{{'forms.wizard.name' |
+                    translate}}</label><i class="bar"></i>
+                  <small v-show="errors.has('hrName')" class="help text-danger">
+                    {{ errors.first('hrName') }}
+                  </small>
                 </div>
               </div>
             </div>
             <div slot="page2" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
               <vuestic-simple-select
                 label="Select country"
                 v-model="hrCountry"
@@ -99,17 +137,23 @@
             <div slot="page3" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
             <div slot="wizardCompleted" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.completed' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
           </vuestic-wizard>
@@ -125,10 +169,16 @@
             wizard-layout="vertical"
             wizard-type="rich">
             <div slot="page1" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
-              <div class="form-group with-icon-right" :class="{'has-error': errors.has('vrName'), 'valid': isFormFieldValid('vrName')}">
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
+              <div class="form-group with-icon-right"
+                   :class="{'has-error': errors.has('vrName'), 'valid': isFormFieldValid('vrName')}">
                 <div class="input-group">
                   <input
                     name="vrName"
@@ -136,17 +186,26 @@
                     v-model="vrName"
                     v-validate="'required'"
                     required title=""/>
-                  <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
+                  <i
+                    class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
                   <i class="fa fa-check valid-icon icon-right input-icon"></i>
-                  <label class="control-label">{{'forms.wizard.name' | translate}}</label><i class="bar"></i>
-                  <small v-show="errors.has('vrName')" class="help text-danger">{{ errors.first('vrName') }}</small>
+                  <label class="control-label">{{'forms.wizard.name' |
+                    translate}}</label><i class="bar"></i>
+                  <small v-show="errors.has('vrName')" class="help text-danger">
+                    {{ errors.first('vrName') }}
+                  </small>
                 </div>
               </div>
             </div>
             <div slot="page2" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
               <vuestic-simple-select
                 label="Select country"
                 v-model="vrCountry"
@@ -159,17 +218,23 @@
             <div slot="page3" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
             <div slot="wizardCompleted" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.completed' | translate}}</h4>
               <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
+                Zebras communicate with facial expressions and sounds. They make
+                loud braying or barking sounds and
+                soft snorting sounds. The position of their ears, how wide open
+                their eyes are, and whether they show
+                their teeth all send a signal. For example, ears flat back means
+                trouble, or "you better follow orders!"
               </p>
             </div>
           </vuestic-wizard>
@@ -179,16 +244,23 @@
 
     <div class="row">
       <div class="col-md-12">
-        <vuestic-widget class="simple-vertical-wizard-widget" :headerText="$t('forms.wizard.verticalSimple')">
+        <vuestic-widget class="simple-vertical-wizard-widget"
+                        :headerText="$t('forms.wizard.verticalSimple')">
           <vuestic-wizard
             :steps="vsSteps"
             wizard-layout="vertical"
             wizard-type="simple">
             <div slot="page1" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
-              <div class="form-group with-icon-right" :class="{'has-error': errors.has('vsName'), 'valid': isFormFieldValid('vsName')}">
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
+              <div class="form-group with-icon-right"
+                   :class="{'has-error': errors.has('vsName'), 'valid': isFormFieldValid('vsName')}">
                 <div class="input-group">
                   <input
                     name="vsName"
@@ -196,17 +268,26 @@
                     v-model="vsName"
                     v-validate="'required'"
                     required title=""/>
-                  <i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
+                  <i
+                    class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
                   <i class="fa fa-check valid-icon icon-right input-icon"></i>
-                  <label class="control-label">{{'forms.wizard.name' | translate}}</label><i class="bar"></i>
-                  <small v-show="errors.has('vsName')" class="help text-danger">{{ errors.first('vsName') }}</small>
+                  <label class="control-label">{{'forms.wizard.name' |
+                    translate}}</label><i class="bar"></i>
+                  <small v-show="errors.has('vsName')" class="help text-danger">
+                    {{ errors.first('vsName') }}
+                  </small>
                 </div>
               </div>
             </div>
             <div slot="page2" class="form-wizard-tab-content">
-              <p>Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"</p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
               <vuestic-simple-select
                 label="Select country"
                 v-model="vsCountry"
@@ -218,19 +299,25 @@
             </div>
             <div slot="page3" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.confirmSelection' | translate}}</h4>
-              <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
-              </p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
             </div>
             <div slot="wizardCompleted" class="form-wizard-tab-content">
               <h4>{{'forms.wizard.completed' | translate}}</h4>
-              <p>
-                Zebras communicate with facial expressions and sounds. They make loud braying or barking sounds and
-                soft snorting sounds. The position of their ears, how wide open their eyes are, and whether they show
-                their teeth all send a signal. For example, ears flat back means trouble, or "you better follow orders!"
-              </p>
+              <div class="form-wizard-tab-content-text">
+                <p>Zebras communicate with facial expressions and sounds. They
+                  make loud braying or barking sounds and
+                  soft snorting sounds. The position of their ears, how wide
+                  open their eyes are, and whether they show
+                  their teeth all send a signal. For example, ears flat back
+                  means trouble, or "you better follow orders!"</p>
+              </div>
             </div>
           </vuestic-wizard>
         </vuestic-widget>
@@ -256,7 +343,7 @@
             },
             isValid: () => {
               return this.isFormFieldValid('hsName')
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepTwo'),
@@ -266,12 +353,12 @@
             },
             isValid: () => {
               return this.$refs.hsCountrySelect.isValid()
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepThree'),
-            slot: 'page3'
-          }
+            slot: 'page3',
+          },
         ]
       },
       hrSteps () {
@@ -284,7 +371,7 @@
             },
             isValid: () => {
               return this.isFormFieldValid('hrName')
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepTwo'),
@@ -294,12 +381,12 @@
             },
             isValid: () => {
               return this.$refs.hrCountrySelect.isValid()
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepThree'),
-            slot: 'page3'
-          }
+            slot: 'page3',
+          },
         ]
       },
       vrSteps () {
@@ -312,7 +399,7 @@
             },
             isValid: () => {
               return this.isFormFieldValid('vrName')
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepTwo'),
@@ -322,12 +409,12 @@
             },
             isValid: () => {
               return this.$refs.vrCountrySelect.isValid()
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepThree'),
-            slot: 'page3'
-          }
+            slot: 'page3',
+          },
         ]
       },
       vsSteps () {
@@ -340,7 +427,7 @@
             },
             isValid: () => {
               return this.isFormFieldValid('vsName')
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepTwo'),
@@ -350,14 +437,14 @@
             },
             isValid: () => {
               return this.$refs.vsCountrySelect.isValid()
-            }
+            },
           },
           {
             label: this.$t('forms.wizard.stepThree'),
-            slot: 'page3'
-          }
+            slot: 'page3',
+          },
         ]
-      }
+      },
     },
     data () {
       return {
@@ -371,7 +458,7 @@
         vsCountry: '',
         email: '',
         countriesList: CountriesList,
-        chosenCountry: ''
+        chosenCountry: '',
       }
     },
     methods: {
@@ -384,8 +471,8 @@
       },
       validateFormField (fieldName) {
         this.$validator.validate(fieldName, this[fieldName])
-      }
-    }
+      },
+    },
   }
 </script>
 
@@ -411,4 +498,8 @@
       width: 80%;
     }
   }
+
+  .form-wizard-tab-content-text {
+    width: 100%; // IE11 only
+  }
 </style>
diff --git a/src/components/layout/navbar/Navbar.vue b/src/components/layout/navbar/Navbar.vue
index 25a3296dd..6ac5ebc0d 100644
--- a/src/components/layout/navbar/Navbar.vue
+++ b/src/components/layout/navbar/Navbar.vue
@@ -1,9 +1,9 @@
 <template>
   <nav class="navbar app-navbar navbar-toggleable-md">
     <div class="navbar-brand-container d-flex align-items-center justify-content-start">
-      <a class="navbar-brand" href="#/dashboard">
+      <router-link class="navbar-brand" to="/dashboard">
         <i class="i-vuestic"></i>
-      </a>
+      </router-link>
     </div>
 
     <div class="row navbar-container">
diff --git a/src/components/ui/tree-view/TreeViewEditablePreview.vue b/src/components/ui/tree-view/TreeViewEditablePreview.vue
index 3a17a4343..0fd9772ff 100644
--- a/src/components/ui/tree-view/TreeViewEditablePreview.vue
+++ b/src/components/ui/tree-view/TreeViewEditablePreview.vue
@@ -56,7 +56,7 @@
     methods: {
       addProduct () {
         this.products.push({
-          id: this.products[this.products.length - 1].id,
+          id: Math.floor(Math.random() * 100000),
           name: 'New product'
         })
       },
diff --git a/src/main.js b/src/main.js
index 1b4ac47da..0490168d6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,7 @@
+// Polyfills
+import 'es6-promise/auto'
+import 'babel-polyfill'
+
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
@@ -9,6 +13,8 @@ import { sync } from 'vuex-router-sync'
 import VuesticPlugin from 'vuestic-theme/vuestic-plugin'
 import './i18n'
 
+
+
 Vue.use(VuesticPlugin)
 
 // NOTE: workaround for VeeValidate + vuetable-2
diff --git a/src/sass/_override-custom-libs.scss b/src/sass/_override-custom-libs.scss
index 4c6218835..3ce2ee911 100644
--- a/src/sass/_override-custom-libs.scss
+++ b/src/sass/_override-custom-libs.scss
@@ -178,6 +178,7 @@
     box-shadow: $tooltip-box-shadow;
     line-height: $tooltip-line-height;
     font-weight: $tooltip-font-weight;
+    border-radius: 0;
   }
 
   .tooltip-arrow {
diff --git a/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue b/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue
index c9c179cfc..44084e99e 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-wizard/VuesticWizard.vue
@@ -215,6 +215,7 @@
       flex-direction: column;
       justify-content: center;
       padding: $wizard-body-step-v-padding  $wizard-body-vl-step-h-padding;
+      width: 100%; // IE11 only
     }
 
     .indicator-container {
diff --git a/yarn.lock b/yarn.lock
index ae9f56429..11b42c463 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2051,6 +2051,10 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
+es6-promise@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
+
 es6-set@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"