Merge pull request #23732 from techdavid/fix-jumping-modal-on-resize

Fix jumping modal when the viewport is resized

2 files changed, 16 insertions, 0 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 4068471cd..689e93bc1 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -136,6 +136,8 @@ const Modal = (() => {
       this._checkScrollbar()
       this._setScrollbar()
 
+      this._adjustDialog()
+
       $(document.body).addClass(ClassName.OPEN)
 
       this._setEscapeEvent()
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 735dc4f0c..e026cd7f1 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -351,6 +351,20 @@ $(function () {
     $toggleBtn.trigger('click')
   })
 
+  QUnit.test('should adjust the inline padding of the modal when opening', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    $('<div id="modal-test"/>')
+      .on('shown.bs.modal', function () {
+        var expectedPadding = $(this).getScrollbarWidth() + 'px'
+        var currentPadding = $(this).css('padding-right')
+        assert.strictEqual(currentPadding, expectedPadding, 'modal padding should be adjusted while opening')
+        done()
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should adjust the inline body padding when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()