Alert message CSS

src/common-components/button-question/button-question.vue

@@ -47,13 +47,6 @@ export default {
   components: {
     listButton,
   },
-  updated() {
-
-    // Dynamically account for the header height.
-    var element = document.getElementsByClassName('overflow-scroll')[0];
-
-    element.style.height = 'calc(100% - ' + element.offsetTop + 'px)';
-  }
 };
 </script>
 
@@ -62,6 +55,8 @@ export default {
   height: calc(100vh - 280px);
 
   .overflow-scroll {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
     -webkit-overflow-scrolling: touch;
   }
 }

src/common-components/funnel-header/funnel-header.vue

@@ -1,8 +1,9 @@
 <template>
 <div class="funnel-header d-flex justify-content-center align-items-center flex-column" v-if="imageSrc">
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-    <alert v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
 </div>
+        <alert class="position-absolute mt-6 w-100" v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
+
 </template>
 
 <script>
@@ -47,8 +48,12 @@ export default {
             this.displayGlobalAlert = true;
             this.globalAlertMessage = alertEvent;
         }
-
     },
+
+    beforeUpdated(){
+    console.log(document.getElementsByClassName('alert')[0].offsetHeight);
+    }
+
 };
 </script>
 

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">