mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 15:16:51 +02:00
Code Issues Releases Wiki Activity

fix(modal): removes .navbar-toggler margin

Browse Source
This commit is contained in:
Catalin Zalog
2018-03-01 10:30:47 +02:00
committed by Johann-S
parent abb4868626
commit cb82394fc8
2 changed files with 3 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/src/modal.js
View File

@@ -64,8 +64,7 @@ const Modal = (($) => {
DATA_TOGGLE : '[data-toggle="modal"]', DATA_TOGGLE : '[data-toggle="modal"]',
DATA_DISMISS : '[data-dismiss="modal"]', DATA_DISMISS : '[data-dismiss="modal"]',
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
STICKY_CONTENT : '.sticky-top', STICKY_CONTENT : '.sticky-top'
NAVBAR_TOGGLER : '.navbar-toggler'
} }
/** /**
@@ -452,15 +451,6 @@ const Modal = (($) => {
.css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`) .css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
}) })
// Adjust navbar-toggler margin
$(navbarToggler).each((index, element) => {
const actualMargin = element.style.marginRight
const calculatedMargin = $(element).css('margin-right')
$(element)
.data('margin-right', actualMargin)
.css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
})
// Adjust body padding // Adjust body padding
const actualPadding = document.body.style.paddingRight const actualPadding = document.body.style.paddingRight
const calculatedPadding = $(document.body).css('padding-right') const calculatedPadding = $(document.body).css('padding-right')
@@ -482,8 +472,8 @@ const Modal = (($) => {
} }
}) })
// Restore sticky content and navbar-toggler margin // Restore sticky content
const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`)) const elements = [].slice.call(document.querySelectorAll(`${Selector.STICKY_CONTENT}`))
$(elements).each((index, element) => { $(elements).each((index, element) => {
const margin = $(element).data('margin-right') const margin = $(element).data('margin-right')
if (typeof margin !== 'undefined') { if (typeof margin !== 'undefined') {

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

@@ -521,48 +521,6 @@ $(function () {
.bootstrapModal('show') .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()
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
var originalMargin = $element.css('margin-right')
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
var currentMargin = $element.css('margin-right')
assert.strictEqual(currentMargin, originalMargin, 'navbar-toggler margin should be reset after closing')
$element.remove()
done()
})
.on('shown.bs.modal', function () {
var expectedMargin = parseFloat(originalMargin) + $(this).getScrollbarWidth() + 'px'
var currentMargin = $element.css('margin-right')
assert.strictEqual(currentMargin, expectedMargin, 'navbar-toggler margin should be adjusted while opening')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})
QUnit.test('should store the original margin of the navbar-toggler in data-margin-right before showing', function (assert) {
assert.expect(2)
var done = assert.async()
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
var originalMargin = '0px'
$element.css('margin-right', originalMargin)
$('<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'), originalMargin, 'original navbar-toggler margin should be stored in data-margin-right')
$(this).bootstrapModal('hide')
})
.bootstrapModal('show')
})
QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) { QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()