modal: don't add margin & padding when sticky is not full width (Back…

…ports #30621)
twbs · Oct 11, 2021 · 05c3f7b · 05c3f7b
1 parent 8133c3e
commit 05c3f7b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/js/src/modal.js b/js/src/modal.js
@@ -484,33 +484,33 @@ class Modal {
 
       // Adjust fixed content padding
       $(fixedContent).each((index, element) => {
-        const actualPadding = element.style.paddingRight
-        const calculatedPadding = $(element).css('padding-right')
-        $(element)
-          .data('padding-right', actualPadding)
-          .css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+        this._setElementAttributes(element, 'paddingRight', 'padding-right')
       })
 
       // Adjust sticky content margin
       $(stickyContent).each((index, element) => {
-        const actualMargin = element.style.marginRight
-        const calculatedMargin = $(element).css('margin-right')
-        $(element)
-          .data('margin-right', actualMargin)
-          .css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
+        this._setElementAttributes(element, 'marginRight', 'margin-right')
       })
 
       // Adjust body padding
-      const actualPadding = document.body.style.paddingRight
-      const calculatedPadding = $(document.body).css('padding-right')
-      $(document.body)
-        .data('padding-right', actualPadding)
-        .css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+      this._setElementAttributes(document.body, 'paddingRight', 'padding-right')
     }
 
     $(document.body).addClass(CLASS_NAME_OPEN)
   }
 
+  _setElementAttributes(element, styleProp, cssProperty) {
+    if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
+      return
+    }
+
+    const actualValue = element.style[styleProp]
+    const calculatedPadding = $(element).css(cssProperty)
+    $(element)
+      .data(cssProperty, actualValue)
+      .css(cssProperty, `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+  }
+
   _resetScrollbar() {
     // Restore fixed content padding
     const fixedContent = [].slice.call(document.querySelectorAll(SELECTOR_FIXED_CONTENT))

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
@@ -162,6 +162,33 @@ $(function () {
       .bootstrapModal('toggle')
   })
 
+  QUnit.test('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var content = [
+      '<div class="sticky-top" style="margin-right: 0; padding-right: 0; width: calc(100vw - 50%)"></div>',
+      '<div class="modal"><div class="modal-dialog"></div></div>'
+    ].join('')
+    $(content).appendTo('#qunit-fixture')
+
+    var stickyTopEl = $('.sticky-top')
+    var originalMargin = Number.parseInt(stickyTopEl.css('margin-right'), 10)
+    var originalPadding = Number.parseInt(stickyTopEl.css('padding-right'), 10)
+    var modalEl = $('.modal')
+    var modal = modalEl.bootstrapModal()
+
+    modalEl.on('shown.bs.modal', function () {
+      var currentMargin = Number.parseInt(stickyTopEl.css('margin-right'), 10)
+      var currentPadding = Number.parseInt(stickyTopEl.css('padding-right'), 10)
+
+      assert.strictEqual(currentMargin, originalMargin, 'sticky element\'s margin should not be adjusted while opening')
+      assert.strictEqual(currentPadding, originalPadding, 'sticky element\'s padding should not be adjusted while opening')
+      done()
+    })
+
+    modal.bootstrapModal('show')
+  })
+
   QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) {
     assert.expect(3)
     var done = assert.async()