diff --git a/client/src/components/Form/SearchForm.vue b/client/src/components/Form/SearchForm.vue index 9466541..46d3837 100644 --- a/client/src/components/Form/SearchForm.vue +++ b/client/src/components/Form/SearchForm.vue @@ -102,14 +102,18 @@ export default { watch: { open(newVal) { + const header = document.querySelector('.header div') // Search Dropdown open if (newVal) { + console.log(this.getScrollbarWidth()) if (!this.homepage) { - document.body.style.marginLeft = '-8px' + document.body.style.marginLeft = `-${this.getScrollbarWidth()}px` + header.style.paddingRight = `${this.getScrollbarWidth()}px` } document.body.style.overflow = 'hidden' } else { document.body.style.marginLeft = 0 + header.style.paddingRight = 0 document.body.style.overflow = 'auto' } }, @@ -139,6 +143,21 @@ export default { this.$emit('formSubmit', search, this.selectedRegion) } }, + getScrollbarWidth() { + const outer = document.createElement('div') + outer.style.visibility = 'hidden' + outer.style.overflow = 'scroll' // forcing scrollbar to appear + outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps + document.body.appendChild(outer) + + const inner = document.createElement('div') + outer.appendChild(inner) + const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth) + + outer.parentNode.removeChild(outer) + + return scrollbarWidth + }, handleEscape(e) { if (e.key === 'Esc' || e.key === 'Escape') { this.dropdown = false diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue index c17360b..5b58938 100644 --- a/client/src/layouts/Default.vue +++ b/client/src/layouts/Default.vue @@ -9,7 +9,7 @@