diff --git a/js/src/modal.js b/js/src/modal.js
index 4f42e733eba5..5afb9791b475 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 7f16bfc1d077..2e46b9cb3627 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 = [
+ '
',
+ ''
+ ].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 = ''
const styleTest = document.createElement('style')