Avoiding break of style on pages with big texts #646 - Fixed (merged)

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@@ -35,6 +35,8 @@
         });
 
         $(document).ready(function () {
+            handleCustomScrolls();
+
             var $myNav = $("#docs-sticky-index");
             Toc.init($myNav);
             $("body").scrollspy({
@@ -57,7 +59,6 @@
                 $(".toggle-row").slideToggle(400);
                 $(this).toggleClass("less");
             });
-
             $(".close-mmenu").on("click", function () {
                 $(".navbar-collapse").removeClass("show");
             });
@@ -65,7 +66,15 @@
             $(".open-dmenu").on("click", function () {
                 $(".docs-tree-list").slideToggle();
             });
+        });
+        $(window).resize(function () {
+            handleCustomScrolls();
+        });
+    });
 
+    function handleCustomScrolls() {
+        var wWidth = $(window).width();
+        if (wWidth > 766) { 
             $("#sidebar-scroll").mCustomScrollbar({
                 theme: "minimal"
             });
@@ -73,9 +82,13 @@
             $("#scroll-index").mCustomScrollbar({
                 theme: "minimal-dark"
             });
-        });
-    });
 
+            //$(".docs-text-field").mCustomScrollbar({
+            //    axis: "xy",
+            //    theme: "minimal" 
+            //});
+        }
+    }
     window.Toc.helpers.createNavList = function () {
         return $('<ul class="nav nav-pills flex-column"></ul>');
     };

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css

@@ -171,7 +171,7 @@
     .docs-page .docs-content .docs-text-field {
       padding: 2rem; }
     .docs-page .docs-content article.docs-body h1 {
-      padding-top: 2rem;
+      padding-top: 1rem;
       font-size: 2.25rem;
       padding-bottom: 10px; }
     .docs-page .docs-content article.docs-body h2 {

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

@@ -285,7 +285,7 @@ body {
 
         article.docs-body {
             h1 {
-                padding-top: 2rem;
+                padding-top: 1rem;
                 font-size: 2.25rem;
                 padding-bottom: 10px;
             }