diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index cedc140d2..83f243250 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -12,27 +12,27 @@
-
-
@@ -32,7 +32,7 @@
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index d80519f9a..5c0d7a270 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -52,7 +52,7 @@ export default {
cmsWidgetName: String,
manualHeadline: String,
manualCopy: String,
- doesScrollToOnAppear: {
+ shouldScrollToOnMount: {
type: Boolean,
default: true
},
@@ -90,6 +90,14 @@ export default {
// second split would return 'provide your VIN'
return copy.split(':')[1].split(',')[1];
},
+ ensureAlertIsInViewPort() {
+ if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
+ var footerHeight = this.getFooterInfoBoxHeight();
+ if (!this.isAlertInViewport(footerHeight)) {
+ this.scrollContainerToAlert(footerHeight);
+ }
+ }
+ },
isAlertInViewport(footerHeight) {
const rect = this.$el.getBoundingClientRect();
return (
@@ -97,20 +105,18 @@ export default {
// remove footerHeight from window height to avoid items being hidden behind footer
rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
);
- },
+ },
+ scrollContainerToAlert(footerHeight) {
+ // alert position on page + height of alert + footer height
+ var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
+ // find the div wrapped by the form element - this is the scrollable container
+ // should be a more future-proof selector in case of CSS class changes
+ var pageContainerScrollable = document.querySelector('form > div');
+ pageContainerScrollable.scrollTo(0, scrollToHeight);
+ },
},
- updated() {
- if (this.doesScrollToOnAppear && this.$el.style.display != 'none') {
- var footerHeight = this.getFooterInfoBoxHeight();
- if (!this.isAlertInViewport(footerHeight)) {
- // alert position on page + height of alert + footer height
- var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
- // find the div wrapped by the form element - this is the scrollable container
- // should be a more future-proof selector in case of CSS class changes
- var pageContainerScrollable = document.querySelector('form > div');
- pageContainerScrollable.scrollTo(0, scrollToHeight);
- }
- }
+ mounted() {
+ this.ensureAlertIsInViewPort();
}
};