1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00

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

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