diff options
author | David Bailey <techdavid@users.noreply.github.com> | 2017-08-26 00:01:41 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2017-08-26 00:01:41 +0300 |
commit | ba6a6f13691000ffaf22ef8e731513737659447f (patch) | |
tree | ce649fd410b7e9a38758ef8318e1d9aba5eef3e8 /js | |
parent | 5a90b4aa3e102e387839a39fbf0ab1444eebbc76 (diff) |
Fix sticky margin when a modal is opened (#23669)
* 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
Diffstat (limited to 'js')
-rw-r--r-- | js/src/modal.js | 12 | ||||
-rw-r--r-- | js/tests/unit/modal.js | 42 |
2 files changed, 52 insertions, 2 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index d21a137fb6..ab73230c8f 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -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') diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 09c3524434..3b028dc100 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -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() |