Created by: pvdlg
Fixes #18373 (closed), fixes #21700 (closed), fixes #20824 (closed), fixes #21840 (closed).
Now _setScrollbar
:
- Save the current
body
padding-right
inthis._originalBodyPadding
- Add a
pading-right
to thebody
corresponding to the currentpadding-right
+ the scrollbar size - Save the current
padding-right
of each fixed element in the element's'padding-right'
data-attribute - Add a
pading-right
to each fixed element corresponding to the currentpadding-right
+ the scrollbar size
And _resetScrollbar
:
- Reset the
body
padding-right
to the saved value - Reset the
padding-right
of each each fixed element to the saved value
The PR #17536 added 2 unit tests to verify that the padding-right
is properly added to the body
. However those 2 tests were ineffective because:
- The function
_getScrollbarWidth
relies on the css class.modal-scrollbar-measure
to determine the scrollbar width and therefore the value of thepadding-right
to add to thebody
. But the class was not present in the unit tests. - QUnit doesn't add a scrollbar even when en element is higher than the viewport, the function
_getScrollbarWidth
was always returning0px
, therefore during a QUnit test the modal plugin was always considering that there is no sidebar, so nopadding-right
was added to thebody
Note: _getScrollbarWidth
, is called by _checkScrollbar
and sets the current scrollbar width in this._scrollbarWidth
. This value is later used by _setScrollbar
to determine the width of the padding to add to the body
and fixed elements. So _setScrollbar
depends on _getScrollbarWidth
and .modal-scrollbar-measure
.
In order to solve the first issue, this PR add the Bootstrap css to the Unit test so the class .modal-scrollbar-measure
and _getScrollbarWidth
can work as intended during the unit tests.
To solve the second one, the tests have been modified to simulate a scrollbar by adding 10px
to the html
element. Then after the modal is opened we verify that a padding-right
of 10px
(corresponding to the width of the simulated scrollbar) has been added to the body
element.
Note: The simulated scrollbar is added to the html
element, and after the modal is opened the test verify the padding-right
of the body
(html
!= body
).
In addition the tests now also check for the padding-right
to be applied on the fixed elements.