From a7881348279a7437ee2e248f1523a0413d1e1612 Mon Sep 17 00:00:00 2001 From: Muhammadamin Date: Mon, 20 Apr 2020 21:16:06 +0300 Subject: [PATCH 1/3] modal: don't add margin & padding when sticky is not full width --- js/tests/unit/modal.spec.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 8a159eef6c98..d28659faed55 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -148,6 +148,36 @@ describe('Modal', () => { modal.toggle() }) + it('should not adjust the inline margin of sticky elements when element do not have full width', done => { + fixtureEl.innerHTML = [ + '
', + '
' + ].join('') + + const stickyTopEl = fixtureEl.querySelector('.sticky-top') + const originalMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const modalEl = fixtureEl.querySelector('.modal') + const modal = new Modal(modalEl) + + modalEl.addEventListener('shown.bs.modal', () => { + const expectedMargin = 0 + const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + + expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should not be adjusted while opening') + modal.toggle() + }) + + modalEl.addEventListener('hidden.bs.modal', () => { + const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + + expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing') + expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing') + done() + }) + + modal.toggle() + }) + it('should ignore values set via CSS when trying to restore body padding after closing', done => { fixtureEl.innerHTML = '
' const styleTest = document.createElement('style') From 4c52f0c6834563bc8d6bbfa2f45f02ca1c2e841e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 20 Nov 2020 20:50:40 +0200 Subject: [PATCH 2/3] Update modal.spec.js --- js/tests/unit/modal.spec.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index d28659faed55..74fb4ed18f31 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -155,20 +155,19 @@ describe('Modal', () => { ].join('') const stickyTopEl = fixtureEl.querySelector('.sticky-top') - const originalMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) modalEl.addEventListener('shown.bs.modal', () => { - const expectedMargin = 0 - const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should not be adjusted while opening') + expect(currentMargin).toEqual(originalMargin, 'sticky element margin should not be adjusted while opening') modal.toggle() }) modalEl.addEventListener('hidden.bs.modal', () => { - const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing') expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing') From f4fef6c1b1a980ea54f3a4b8afbdaaa51de96b23 Mon Sep 17 00:00:00 2001 From: Rohit Sharma Date: Mon, 7 Dec 2020 21:44:05 +0200 Subject: [PATCH 3/3] Check if element is shorter than window - Update unit test as well --- js/src/modal.js | 4 ++++ js/tests/unit/modal.spec.js | 19 +++++++------------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/js/src/modal.js b/js/src/modal.js index 79a2f143a38b..5b16dd5bb9f5 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -466,6 +466,10 @@ class Modal extends BaseComponent { _setElementAttributes(selector, styleProp, callback) { SelectorEngine.find(selector) .forEach(element => { + if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) { + return + } + const actualValue = element.style[styleProp] const calculatedValue = window.getComputedStyle(element)[styleProp] Manipulator.setDataAttribute(element, styleProp, actualValue) diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 74fb4ed18f31..a37090dad633 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -148,33 +148,28 @@ describe('Modal', () => { modal.toggle() }) - it('should not adjust the inline margin of sticky elements when element do not have full width', done => { + it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => { fixtureEl.innerHTML = [ - '
', + '
', '
' ].join('') const stickyTopEl = fixtureEl.querySelector('.sticky-top') const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10) const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) modalEl.addEventListener('shown.bs.modal', () => { const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) + const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10) - expect(currentMargin).toEqual(originalMargin, 'sticky element margin should not be adjusted while opening') - modal.toggle() - }) - - modalEl.addEventListener('hidden.bs.modal', () => { - const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - - expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing') - expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing') + expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening') + expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening') done() }) - modal.toggle() + modal.show() }) it('should ignore values set via CSS when trying to restore body padding after closing', done => {