Search code examples
markdowndocsify

Docsify README page not scrolling

I'm using Docsify to display some markdown pages but I'm running into an issue: the main page index.html is not scrolling through all of the text that I have in my README.md.

Here are my index.html page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Documentation</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="My Documentation Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
  <script type="text/javascript">
    document.querySelector('link[title=theme]').href="//unpkg.com/docsify/lib/themes/dark.css";
  </script>
  <style type="text/css">
    .sidebar li {
      margin: 0;
      line-height: 1.7em;
    }
    .sidebar ul li ul {
      padding-bottom: 10px;
    }
    .sidebar-nav>ul>li>p {
      font-size: 17px;
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <div id="app">Loading....</div>
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <script>
    window.$docsify = {
      name: 'My Docs',
      repo: '',
      auto2top: true,
      executeScript: true,
      loadSidebar: true,
      maxLevel: 4,
      subMaxLevel: 1,
      search: {
        paths: 'auto',
      },
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
  <script src="//unpkg.com/docsify-copy-code"></script>
  <script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-sql.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
</body>
</html>

and here is my README.md page:

# My Personal Documentation

Some documentation

angularStuff: 

asanaStuff: 

assemblyStuff: 

&nbsp;  
&nbsp;  

bashStuff: 

batchStuff: 

bootstrapStuff: 

my repo
- **this is my docs repo for these docs**
&nbsp;  
&nbsp;  

cards: 
- **repository to keep track of**
&nbsp;  
&nbsp;  

cSharpStuff:
&nbsp;  
&nbsp;  

excelStuff: 

javaStuff:

javaScriptStuff: 

&nbsp;  
&nbsp;  

luaStuff: 

&nbsp;  
&nbsp;  

miscStuff: 
- **miscellaneous stuff I couldn't think of where to put**
&nbsp;  
&nbsp;  

mySQLStuff: 

&nbsp;  
&nbsp;  

oracleStuff: 

&nbsp;  
&nbsp;  

phpStuff: 

prs: 
- **repository to keep track of PRs I reviewed from **
&nbsp;  
&nbsp;  

pythonStuff: 

&nbsp;  
&nbsp;  

rubyStuff: yStuff

&nbsp;  
&nbsp;  

sqlServerStuff: ServerStuff

&nbsp;  
&nbsp;  

typeScriptStuff: eScriptStuff

&nbsp;  
&nbsp;  

vueStuff: 

&nbsp;  
&nbsp;  

writing:

and here is a screenshot of how it is displaying for me:

enter image description here

notice in my screenshot that the last thing displayed is javaScriptStuff: but if you look at my README.md there is lots of stuff after that which I should be able to scroll to but I can't.

It's not really visible in this screenshot, but there is no scroll bar on the right that will allow me to scroll down to see the rest of the content.

As always, a correct, clearly explained answer will be marked as the accepted answer and upvoted.

Thanks in advance.

Solution

  • I asked a couple of co-workers after I posted this question and was directed to the answer to my problem. I needed to specify a value for overflow in my css block in my index.html.

    All I had to do was add this:

    .content {
  overflow: auto;
}

    to my block that begins with <style type="text/css"> and now the vertical scroll bar is visible.