Fix padding with modal and fixed navbar #21800
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #18373, fixes #21700, fixes #20824, fixes #21840.
Now
_setScrollbar
:body
padding-right
inthis._originalBodyPadding
pading-right
to thebody
corresponding to the currentpadding-right
+ the scrollbar sizepadding-right
of each fixed element in the element's'padding-right'
data-attributepading-right
to each fixed element corresponding to the currentpadding-right
+ the scrollbar sizeAnd
_resetScrollbar
:body
padding-right
to the saved valuepadding-right
of each each fixed element to the saved valueThe PR #17536 added 2 unit tests to verify that the
padding-right
is properly added to thebody
. However those 2 tests were ineffective because:_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._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 inthis._scrollbarWidth
. This value is later used by_setScrollbar
to determine the width of the padding to add to thebody
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 thehtml
element. Then after the modal is opened we verify that apadding-right
of10px
(corresponding to the width of the simulated scrollbar) has been added to thebody
element.Note: The simulated scrollbar is added to the
html
element, and after the modal is opened the test verify thepadding-right
of thebody
(html
!=body
).In addition the tests now also check for the
padding-right
to be applied on the fixed elements.