Merge pull request #5850 from rashi-cse/fix_scrollbar_placement

Fixed Help Tutorial Scrollbar Placement

Author: omsuneri

css/activities.css

@@ -1199,7 +1199,7 @@ table {
   left: 0 !important;
   border: 0 !important;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
   width: calc(100% - 130px) !important;
   max-width: 350px;
   padding: 1rem 1rem 0 1rem;
@@ -1209,6 +1209,10 @@ table {
   align-items: center;
 }
 
+#helpScrollWrapper {
+  overflow-y: auto;
+}
+
 #helpBodyDiv .heading,
 #helpBodyDiv .description,
 #helpBodyDiv .message {

js/widgets/help.js

@@ -82,8 +82,10 @@ class HelpWidget {
                     <div id="right-arrow" class="hover" tabindex="-1"></div>
                     <div id="left-arrow" class="hover" tabindex="-1"></div>
                     <div id="helpButtonsDiv" tabindex="-1"></div>
-                    <div id="helpBodyDiv" tabindex="-1"></div>
-                         `;
+                    <div id="helpScrollWrapper">
+                        <div id="helpBodyDiv" tabindex="-1"></div>
+                    </div>
+                          `;
 
         this._helpDiv.insertAdjacentHTML("afterbegin", innerHTML);
         this.widgetWindow.getWidgetBody().append(this._helpDiv);
@@ -467,7 +469,7 @@ class HelpWidget {
         // this._helpDiv.style.backgroundColor = "#e8e8e8";
 
         const helpDivHTML =
-            '<div id="right-arrow" class="hover" tabindex="-1"></div><div id="left-arrow" class="hover" tabindex="-1"></div><div id="helpButtonsDiv" tabindex="-1"></div><div id="helpBodyDiv" tabindex="-1"></div>';
+            '<div id="right-arrow" class="hover" tabindex="-1"></div><div id="left-arrow" class="hover" tabindex="-1"></div><div id="helpButtonsDiv" tabindex="-1"></div><div id="helpScrollWrapper"><div id="helpBodyDiv" tabindex="-1"></div></div>';
         this._helpDiv.insertAdjacentHTML("afterbegin", helpDivHTML);
 
         this.widgetWindow.getWidgetBody().append(this._helpDiv);