clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 18:47:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

modal: don't add margin & padding when sticky is not full width (#30621)

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

* Check if element is shorter than window

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
This commit is contained in:
Muhammadamin 2021-02-23 07:52:09 -05:00 committed by GitHub
parent 45ff785377
commit 056216a3bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/modal.js
View File

@ -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)

24
js/tests/unit/modal.spec.js
View File

@ -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 = [
'<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')