Created by: deilv
Fixes #18373 (closed), Fixes #20824 (closed), Fixes #21700 (closed), Fixes #21840 (closed) (duplicates)
The problem:
_setScrollbar() and _resetScrollbar() in file js/src/modal.js failed to properly adjust padding-right when opening and closing modals, while using fixed elements (ie fixed-top navbar). Both functions had to be rewritten.
Changes:
_setScrollbar() -- called when opening a modal
- Store the original body padding-right in data-padding-right
- Adjust the body padding-right according to the calculated _scrollbarWidth
- Store the fixed element's original padding-right in data-padding-right
- Adjust the element's padding-right according to the calculated _scrollbarWidth
- Store the navbar-toggler's original margin-right in data-margin-right
- Adjust the navbar-toggler's margin-right according to the calculated _scrollbarWidth
_resetScrollbar() -- called when closing a modal
- Restore original body padding-right and remove the data attribute
- Restore original fixed element's padding-right and remove the data attribute
- Restore original navbar-toggler's margin-right and remove the data attribute
Unit Tests
- Fixed missing modal-scrollbar-measure in modal unit tests
- Fixed test for body padding adjustment
- Added tests for fixed element padding adjustment
- Added tests for navbar-toggler margin adjustment
- Removed some unused tests from previous, incomplete patches
You can see the changes live in codepen.