mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 16:44:17 +02:00
modal: don't add margin & padding when sticky is not full width (#30621)
* 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:
@@ -466,6 +466,10 @@ class Modal extends BaseComponent {
|
|||||||
_setElementAttributes(selector, styleProp, callback) {
|
_setElementAttributes(selector, styleProp, callback) {
|
||||||
SelectorEngine.find(selector)
|
SelectorEngine.find(selector)
|
||||||
.forEach(element => {
|
.forEach(element => {
|
||||||
|
if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const actualValue = element.style[styleProp]
|
const actualValue = element.style[styleProp]
|
||||||
const calculatedValue = window.getComputedStyle(element)[styleProp]
|
const calculatedValue = window.getComputedStyle(element)[styleProp]
|
||||||
Manipulator.setDataAttribute(element, styleProp, actualValue)
|
Manipulator.setDataAttribute(element, styleProp, actualValue)
|
||||||
|
@@ -161,6 +161,30 @@ describe('Modal', () => {
|
|||||||
modal.toggle()
|
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 => {
|
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>'
|
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
|
||||||
const styleTest = document.createElement('style')
|
const styleTest = document.createElement('style')
|
||||||
|
Reference in New Issue
Block a user