Check if element is shorter than window

- Update unit test as well
twbs · Feb 19, 2021 · f4fef6c · f4fef6c
1 parent 4c52f0c
commit f4fef6c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git 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
@@ -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 = [
-        '<div class="sticky-top" style="margin-right: 0px; width: 50%"></div>',
+        '<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 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 => {