diff options
| author | Muhammadamin <muhamadamin1992@gmail.com> | 2021-02-23 15:52:09 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-02-23 15:52:09 +0300 |
| commit | 056216a3bd2fd1f28ba9ec6f2797aa2aaec5c6f0 (patch) | |
| tree | 1a1b76999378836e36ccdc4a4a8bb549213b303c | |
| parent | 45ff785377bfc3e96889ee1c3d30364ba06a177a (diff) | |
modal: don't add margin & padding when sticky is not full width (#30621)
* modal: don't add margin & padding when sticky is not full width
* Check if element is shorter than window
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
| -rw-r--r-- | js/src/modal.js | 4 | ||||
| -rw-r--r-- | js/tests/unit/modal.spec.js | 24 |
2 files changed, 28 insertions, 0 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 4f42e733eb..5afb9791b4 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 7f16bfc1d0..2e46b9cb36 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -161,6 +161,30 @@ describe('Modal', () => { modal.toggle() }) + it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', done => { + fixtureEl.innerHTML = [ + '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: calc(100vw - 50%)"></div>', + '<div class="modal"><div class="modal-dialog"></div></div>' + ].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\'s margin should not be adjusted while opening') + expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening') + done() + }) + + modal.show() + }) + it('should ignore values set via CSS when trying to restore body padding after closing', done => { fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>' const styleTest = document.createElement('style') |