rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix sticky margin when a modal is opened (#23669)

Browse Source 
* Adjust margin for sticky elements on modal

Previously white space was visible to the right of sticky elements due to right padding being added to the body. This fixes #23661.

* Add unit tests for margin of sticky elements on modal
This commit is contained in:
David Bailey 2017-08-25 22:01:41 +01:00 committed by Johann-S
parent 5a90b4aa3e
commit ba6a6f1369
2 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/modal.js
View File

@ -68,6 +68,7 @@ const Modal = (($) => {
DATA_TOGGLE : '[data-toggle="modal"]',
DATA_DISMISS : '[data-dismiss="modal"]',
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT : '.sticky-top',
NAVBAR_TOGGLER : '.navbar-toggler'
}
@ -441,6 +442,13 @@ const Modal = (($) => {
$(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
})
// Adjust sticky content margin
$(Selector.STICKY_CONTENT).each((index, element) => {
const actualMargin = $(element)[0].style.marginRight
const calculatedMargin = $(element).css('margin-right')
$(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
})
// Adjust navbar-toggler margin
$(Selector.NAVBAR_TOGGLER).each((index, element) => {
const actualMargin = $(element)[0].style.marginRight
@ -464,8 +472,8 @@ const Modal = (($) => {
}
})
// Restore navbar-toggler margin
$(Selector.NAVBAR_TOGGLER).each((index, element) => {
// Restore sticky content and navbar-toggler margin
$(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
const margin = $(element).data('margin-right')
if (typeof margin !== 'undefined') {
$(element).css('margin-right', margin).removeData('margin-right')

42
js/tests/unit/modal.js
View File

@ -433,6 +433,48 @@ $(function () {
.bootstrapModal('show')
})
QUnit.test('should adjust the inline margin of sticky elements when opening and restore when closing', function (assert) {
assert.expect(2)
var done = assert.async()
var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
var originalPadding = $element.css('margin-right')
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
var currentPadding = $element.css('margin-right')
assert.strictEqual(currentPadding, originalPadding, 'sticky element margin should be reset after closing')
$element.remove()
done()
})
.on('shown.bs.modal', function () {
var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + 'px'
var currentPadding = $element.css('margin-right')
assert.strictEqual(currentPadding, expectedPadding, 'sticky element margin should be adjusted while opening')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})
QUnit.test('should store the original margin of sticky elements in data-margin-right before showing', function (assert) {
assert.expect(2)
var done = assert.async()
var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
var originalPadding = '0px'
$element.css('margin-right', originalPadding)
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
$element.remove()
done()
})
.on('shown.bs.modal', function () {
assert.strictEqual($element.data('margin-right'), originalPadding, 'original sticky element margin should be stored in data-margin-right')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})
QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
assert.expect(2)
var done = assert.async()