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 twbs#23661.
vtenfys · Aug 25, 2017 · c9d073b · c9d073b
1 parent 4571ab0
commit c9d073b
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/js/src/modal.js b/js/src/modal.js
@@ -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).add(Selector.NAVBAR_TOGGLER).each((index, element) => {
         const margin = $(element).data('margin-right')
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right')