rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Muhammadamin 2020-04-20 21:16:06 +03:00 • committed by XhmikosR
parent b85ca045e0
commit 2d6021bd65
2 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
js/src/modal.js
View file

@ -462,6 +462,10 @@ class Modal extends BaseComponent {
// Adjust fixed content padding
SelectorEngine.find(SELECTOR_FIXED_CONTENT)
.forEach(element => {
if (window.innerWidth > element.clientWidth + this._scrollbarWidth) {
return
}
const actualPadding = element.style.paddingRight
const calculatedPadding = window.getComputedStyle(element)['padding-right']
Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
@ -471,6 +475,10 @@ class Modal extends BaseComponent {
// Adjust sticky content margin
SelectorEngine.find(SELECTOR_STICKY_CONTENT)
.forEach(element => {
if (window.innerWidth > element.clientWidth + this._scrollbarWidth) {
return
}
const actualMargin = element.style.marginRight
const calculatedMargin = window.getComputedStyle(element)['margin-right']
Manipulator.setDataAttribute(element, 'margin-right', actualMargin)

30
js/tests/unit/modal.spec.js
View file

@ -142,6 +142,36 @@ describe('Modal', () => {
modal.toggle()
})
it('should not adjust the inline margin of sticky elements when element do not have full width', done => {
fixtureEl.innerHTML = [
'<div class="sticky-top" style="margin-right: 0px; width: 50%"></div>',
'<div class="modal"><div class="modal-dialog"></div></div>'
].join('')
const stickyTopEl = fixtureEl.querySelector('.sticky-top')
const originalMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
const expectedMargin = 0
const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should not be adjusted while opening')
modal.toggle()
})
modalEl.addEventListener('hidden.bs.modal', () => {
const currentMargin = 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')
done()
})
modal.toggle()
})
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')