Merge pull request #133 from IgniteUI/hPopov/fix-issue-132

Adding scrollbar when affix content oveflows
IgniteUI · Oct 29, 2019 · a96ed75 · a96ed75
2 parents 2deaa22 + 922b1bb
commit a96ed75
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 8 deletions.
diff --git a/template/bundling.global.json b/template/bundling.global.json
@@ -1 +1 @@
-{"_timestamp":1572351602833,"_docFXBundleChecksum":"38d2b9daf939747e1aaa27f7dde89360","_scriptsBundleChecksum":"577deb51ea8fc13e07c36841a505684c","_stylesBundleFileName":"694b86d40ca7f928205b48d8b48b325e"}
+{"_timestamp":1572357924644,"_docFXBundleChecksum":"42fe54ee90c1bec8a4b9e7ae174a3766","_scriptsBundleChecksum":"577deb51ea8fc13e07c36841a505684c","_stylesBundleFileName":"5d03909d06465d65cb04adc35449fa92"}
diff --git a/template/styles/bundles/docfx-bundle.min.js b/template/styles/bundles/docfx-bundle.min.js
diff --git a/template/styles/bundles/styles-bundle.min.css b/template/styles/bundles/styles-bundle.min.css
diff --git a/template/styles/css/main.css b/template/styles/css/main.css
@@ -18,7 +18,8 @@ body,
   font-size: 1rem;
   line-height: 1.5rem;
   margin: auto;
-  color: #585858; }
+  color: #585858;
+  overflow-x: hidden; }
 
 h1,
 h2,
@@ -428,10 +429,17 @@ sub {
     background-color: #ffffff; }
   .sideaffix ul.nav > li > a:focus {
     background: none; }
+  .sideaffix ::-webkit-scrollbar {
+    width: 2px; }
+  .sideaffix ::-webkit-scrollbar-track {
+    background: #f1f1f1; }
+  .sideaffix ::-webkit-scrollbar-thumb {
+    background: #888; }
 
 .affix {
   position: relative;
-  height: 100%; }
+  height: 80%;
+  overflow: auto; }
 
 .affix h5 {
   font-size: 14px;

diff --git a/template/styles/docfx.js b/template/styles/docfx.js
@@ -767,7 +767,7 @@ $(function () {
     var html = util.formList(breadcrumb, "breadcrumb");
     $("#breadcrumb").html(html);
   }
-
+ 
   //Setup Affix
   function renderAffix() {
     var hierarchy = getHierarchy();
@@ -780,7 +780,7 @@ $(function () {
         .empty()
         .append(html);
       if ($("footer").is(":visible")) {
-        $(".sideaffix").css("bottom", "70px");
+        $(".sideaffix").css("bottom", "50px");
       }
       $("#affix").on("activate.bs.scrollspy", function (e) {
         if (e.target) {

diff --git a/template/styles/sass/partials/_affix.scss b/template/styles/sass/partials/_affix.scss
@@ -22,11 +22,21 @@
     ul.nav>li>a:focus {
         background: none;
     }
+    ::-webkit-scrollbar {
+        width: 2px;
+    }
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1; 
+    }
+    ::-webkit-scrollbar-thumb {
+        background: #888; 
+    }
 }
 
 .affix {
     position: relative;
-    height: 100%;
+    height: 80%;
+    overflow: auto;
 }
 
 .affix h5 {

diff --git a/template/styles/sass/partials/_typography.scss b/template/styles/sass/partials/_typography.scss
@@ -17,6 +17,7 @@ body,
     line-height: 1.5rem;
     margin: auto;
     color: #585858;
+    overflow-x: hidden;
 }
 
 h1,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"_timestamp":1572351602833,"_docFXBundleChecksum":"38d2b9daf939747e1aaa27f7dde89360","_scriptsBundleChecksum":"577deb51ea8fc13e07c36841a505684c","_stylesBundleFileName":"694b86d40ca7f928205b48d8b48b325e"}
		{"_timestamp":1572357924644,"_docFXBundleChecksum":"42fe54ee90c1bec8a4b9e7ae174a3766","_scriptsBundleChecksum":"577deb51ea8fc13e07c36841a505684c","_stylesBundleFileName":"5d03909d06465d65cb04adc35449fa92"}