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/src/modal.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/src/modal.js')
-rw-r--r-- | js/src/modal.js | 12 |
1 files changed, 10 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') |