Using overflow style property to scroll web page contents, not working

Donald Symmons 2,856 Reputation points
2023-03-17T02:28:18.5866667+00:00

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?

HTML

<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>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,375 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,254 questions
0 comments
Accepted answer
  1. Bruce (SqlWork.com) 56,026 Reputation points
    2023-03-17T15:39:43.2733333+00:00

    an overflow-y only happens if the content height is greater than the container. the default height for a container is its content height, thus no overflow, you need to set an explicit height to the container to enable overflow:

           .vertical-scroll {
            overflow-y: scroll;
            max-height: 200px;
        }
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest