I am trying to create a situation where I will scroll my web page with the use of an overflow property; if it overflows vertically, so I put my div tags in a parent div and set the overflow-y: scroll style property of the parent div tag but it’s not working. The parent div tag of my web page overflows vertically but it’s the browser scroll bar that is being used to scroll instead of the scroll bar I created for the div tag. The vertical scroll bar is not even showing to scroll, it just shows vertical bar line without the scroll bar in it
How can I make use of the scroll bar I created with the overflow style property?
Here is my full HTML and CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="stylesheet" href="style.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title>Page1</title>
<style type="text/css">
@import url('https://fonts.cdnfonts.com/css/proxima-nova-2?styles=44818,44819,44822,44823,44817,44820,44821,44812,44813,44814,44815,44810');
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 200px;
max-width: 200px;
min-height: 100vh;
top: 0;
left: 0;
z-index: 999;
background-color: #0b2436;
color: #fff;
transition: all 0.3s;
font-family: 'Graphik', sans-serif;
}
@media screen and (min-width: 1200px) {
#content {
width: 100%;
}
}
@media screen and (min-width: 360px) and (max-width:640px) {
#content {
width: 100%;
}
}
@media (max-width: 768px) {
#sidebar {
margin-left: -200px;
}
#sidebar.active {
margin-left: 0;
}
}
p {
font-family: 'Graphik', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
background-color: #0b2436;
color: #fff;
transition: all 0.3s;
}
#topbar {
background-color: #0b2436;
}
#sidebar .sidebar-header {
background: #0b2436;
font-family: 'Graphik', sans-serif;
margin: 0 auto;
padding: 5px;
border-bottom: 0.3px solid #404344;
}
#sidebar ul.components {
padding: 10px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
font-size: medium;
}
#sub-head:hover {
color: #05214d;
}
#navbarSupportedContent li a {
color: #eeeeee;
font-family: 'Graphik', sans-serif;
}
#sidebar ul li a {
padding: 10px;
display: block;
font-size: 10pt;
font-family: 'Graphik', sans-serif;
}
#sidebar ul li a:hover {
color: #eeeeee;
background-color: rgba(44, 62, 80, 0.3);
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #31b8ef;
background-color: rgba(44, 62, 80, 0.3);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #0b2436;
font-family: 'Graphik', sans-serif;
}
.navbar navbar-expand-lg {
background-color: #0b2436;
}
.test {
-moz-transform: rotate(-40deg); /* FF3.5+ */
-o-transform: rotate(-40deg); /* Opera 10.5 */
-webkit-transform: rotate(-40deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-40); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-40)"; /* IE8 */
-sand-transform: rotate(-40deg);
}
.vertical-scroll {
overflow-y: scroll;
}
</style>
</head>
<body style="font-family: 'Graphik', sans-serif; font-size: 16px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<nav id="sidebar">
<ul class="nav navbar-nav list-unstyled components">
<li class="nav-item">
<a class="nav-link" href="#">Page1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Page2</a>
</li>
</ul>
</nav>
<!--Main Page Content -->
<div id="content" style="font-size: 10pt; width: 100%;">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4;">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle Navigation</span>
</button>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
<asp:Label ID="Label5" runat="server" Text="user" Visible="false"></asp:Label>
<asp:Label class="" ID="user" runat="server" Font-Size="10pt" Text="mannyrchrd@gmail.com" ForeColor="#0b2436"></asp:Label>
<a class="dropdown" data-toggle="dropdown" aria-expanded="false" href="#" style="background-color: transparent; border: none; cursor: pointer;">
<i class="fal fa-user-circle" style="margin: 0 auto; font-size: 11pt; color: #0b2436;">
<span class="caret" style="color: #0b2436;"></span>
</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="vertical-scroll">
<div class="col-sm-8" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; font-size: 10pt;">
<div class="card1" style="width: 100%; margin-top: 3%; border-radius: 6px; border: 1px solid #dde0e2;">
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" Width="40" Height="40" />
<div style="text-align: center;">
<asp:Label ID="Label3" runat="server" Text="Title"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="title" runat="server" Text="BOOK"></asp:Label>
</div>
<div class="row" style="margin-top: 3%;">
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="lblname">First Name</label>
<div class="input-group">
<asp:Label ID="Label2" runat="server" Text="Richard"></asp:Label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="namelbl"></label>
<div class="input-group">
<asp:Label ID="Label1" runat="server" Text="Samuel"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; font-size: 10pt;">
<div class="card1" style="width: 100%; margin-top: 3%; border-radius: 6px; border: 1px solid #dde0e2;">
<asp:Image ID="Image1" ImageUrl="Test.png" runat="server" Width="40" Height="40" />
<div style="text-align: center;">
<asp:Label ID="Label6" runat="server" Text="Title"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="Label7" runat="server" Text="BOOK"></asp:Label>
</div>
<div class="row" style="margin-top: 3%;">
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label8">First Name</label>
<div class="input-group">
<asp:Label ID="Label9" runat="server" Text="Richard"></asp:Label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label10"></label>
<div class="input-group">
<asp:Label ID="Label11" runat="server" Text="Samuel"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; font-size: 10pt;">
<div class="card1" style="width: 100%; margin-top: 3%; border-radius: 6px; border: 1px solid #dde0e2;">
<asp:Image ID="Image2" ImageUrl="Test.png" runat="server" Width="40" Height="40" />
<div style="text-align: center;">
<asp:Label ID="Label12" runat="server" Text="Title"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="Label13" runat="server" Text="BOOK"></asp:Label>
</div>
<div class="row" style="margin-top: 3%;">
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label14">First Name</label>
<div class="input-group">
<asp:Label ID="Label15" runat="server" Text="Richard"></asp:Label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label16"></label>
<div class="input-group">
<asp:Label ID="Label17" runat="server" Text="Samuel"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>
