I want to create a basic dashboard page.
I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like:
https://i.sstatic.net/EATK6.png
I encountered an issue where the vertical scrollbar is not visible even though there is more content beyond what is shown on the page.
Although scrolling is still possible, it's puzzling why the scrollbar isn't visible.
I am using bootstrap 4 along with custom CSS.
What could be causing this issue? And is there a better way to implement this using bootstrap 4?
Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
#sideMenu {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222D32;
overflow-x: hidden;
transition: 0.3s;
}
#mainContents {
height: 100%;
width: 100%;
padding-right: 250px;
position: fixed;
z-index: -1;
top: 0px;
left: 250px;
background-color: #ECF0F5;
overflow-x: hidden;
transition: 0.3s;
}
#contentBody {
width: 100%;
padding: 20px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="sideMenu">
</div>
<div id="mainContents">
<div id="contentBody">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum...
</div>
</div>
</body>
</html>