Merge remote-tracking branch 'remotes/origin/main' into rohit/main/modal-with-sticky

js/src/modal.js

@@ -461,21 +461,11 @@ class Modal extends BaseComponent {
 
       // Adjust fixed content padding
       SelectorEngine.find(SELECTOR_FIXED_CONTENT)
-        .forEach(element => {
+        .forEach(element => this._setElementAttributes(element, 'paddingRight'))
-          const actualPadding = element.style.paddingRight
-          const calculatedPadding = window.getComputedStyle(element)['padding-right']
-          Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
-          element.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
-        })
 
       // Adjust sticky content margin
       SelectorEngine.find(SELECTOR_STICKY_CONTENT)
-        .forEach(element => {
+        .forEach(element => this._setElementAttributes(element, 'marginRight'))
-          const actualMargin = element.style.marginRight
-          const calculatedMargin = window.getComputedStyle(element)['margin-right']
-          Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
-          element.style.marginRight = `${Number.parseFloat(calculatedMargin) - this._scrollbarWidth}px`
-        })
 
       // Adjust body padding
       const actualPadding = document.body.style.paddingRight
@@ -491,23 +481,11 @@ class Modal extends BaseComponent {
   _resetScrollbar() {
     // Restore fixed content padding
     SelectorEngine.find(SELECTOR_FIXED_CONTENT)
-      .forEach(element => {
+      .forEach(element => this._removeElementAttributes(element, 'paddingRight'))
-        const padding = Manipulator.getDataAttribute(element, 'padding-right')
-        if (typeof padding !== 'undefined') {
-          Manipulator.removeDataAttribute(element, 'padding-right')
-          element.style.paddingRight = padding
-        }
-      })
 
     // Restore sticky content and navbar-toggler margin
     SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)
-      .forEach(element => {
+      .forEach(element => this._removeElementAttributes(element, 'marginRight'))
-        const margin = Manipulator.getDataAttribute(element, 'margin-right')
-        if (typeof margin !== 'undefined') {
-          Manipulator.removeDataAttribute(element, 'margin-right')
-          element.style.marginRight = margin
-        }
-      })
 
     // Restore body padding
     const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
@@ -528,6 +506,29 @@ class Modal extends BaseComponent {
     return scrollbarWidth
   }
 
+  _setElementAttributes(element, cssProp) {
+    if (window.innerWidth > element.clientWidth + this._scrollbarWidth) {
+      return
+    }
+
+    const actualValue = element.style[cssProp]
+    const computedValue = window.getComputedStyle(element)[cssProp]
+
+    Manipulator.setDataAttribute(element, cssProp, actualValue)
+
+    element.style[cssProp] = cssProp === 'marginRight' ?
+      `${Number.parseFloat(computedValue) - this._scrollbarWidth}px` :
+      `${Number.parseFloat(computedValue) + this._scrollbarWidth}px`
+  }
+
+  _removeElementAttributes(element, cssProp) {
+    const cssValue = Manipulator.getDataAttribute(element, cssProp)
+    if (typeof cssValue !== 'undefined') {
+      Manipulator.removeDataAttribute(element, cssProp)
+      element.style[cssProp] = cssValue
+    }
+  }
+
   // Static
 
   static jQueryInterface(config, relatedTarget) {

js/tests/unit/modal.spec.js

@@ -142,6 +142,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')