Improved scrollbar-fix-(inner|outer) classes, inner class expands content to avoid...

[ndcode_site.git] / css / bootstrap / _custom.scss

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 58393b7..c04669a 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -5,11 +5,17 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
 
 // apply this to a div inside the body tag
 // prevents page shifting to left/right as scrollbar appears/disappears
-// it works by calculating the width of the scrollbar and then adding
-// the corresponding amount of padding to left to keep things centered
-// see https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe
-.scrollbar-fix {
-  padding-left: calc(100vw - 100%);
+// uses negative margin to force content to be drawn under the scrollbar
+// (this is useful for modals since scrollbar disappears during a modal)
+// note: intended to be used with div.container which adds padding for
+// media sizes sm and above, don't do it for xs to avoid losing content
+.scrollbar-fix-outer {
+  overflow-x: hidden;
+}
+.scrollbar-fix-inner {
+  @include media-breakpoint-up(sm) {
+    margin-right: calc(100% - 100vw);
+  }
 }
 
 // place a container div around entire page, and then use this