Apply custom Scrollbar CSS to DropDown menu class using CSS

Last Reply 3 months ago By dharmendr

Posted 3 months ago

now according to given code, custom scrolling applied on body. but i want to apply it only where class=dropdown-menu.

now according to given code, custom scrolling applied on body..but i want to apply it only where class=dropdown-menu

<ul class="dropdown-menu" style="width:250px;max-height:300px;overflow-x:auto;">
 <asp:GridView ID="grdnotification"  runat="server">
</asp:GridView>
</ul>

 

<style type="text/css"> 
/* For the "inset" look only */
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 7px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}

 

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago Modified on 3 months ago

Hi mukesh1,

Check this example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        html
        {
            overflow: auto;
        }
        .customScrollBar
        {
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            padding: 0px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        
        /* Let's get this party started */
        ::-webkit-scrollbar
        {
            width: 7px;
        }
        
        /* Track */
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        
        /* Handle */
        ::-webkit-scrollbar-thumb
        {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: rgba(255,0,0,0.8);
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }
        ::-webkit-scrollbar-thumb:window-inactive
        {
            background: rgba(255,0,0,0.4);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown<span class="caret"></span>
            </button>
            <ul class="dropdown-menu customScrollBar" style="width: 250px; max-height: 300px;
                overflow-x: auto;">
                <table cellspacing="0" rules="all" border="1" id="grdnotification" style="border-collapse: collapse;">
                    <tr>
                        <th scope="col">
                            Id
                        </th>
                        <th scope="col">
                            Name
                        </th>
                        <th scope="col">
                            Country
                        </th>
                    </tr>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            John Hammond
                        </td>
                        <td>
                            United States
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Mudassar Khan
                        </td>
                        <td>
                            India
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Suzanne Mathews
                        </td>
                        <td>
                            France
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Robert Schidner
                        </td>
                        <td>
                            Russia
                        </td>
                    </tr>
                </table>
            </ul>
        </div>
    </div>
    <br />
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown 1<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="width: 250px; max-height: 300px; overflow-x: auto;">
                <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
                    <tr>
                        <th scope="col">
                            Id
                        </th>
                        <th scope="col">
                            Name
                        </th>
                        <th scope="col">
                            Country
                        </th>
                    </tr>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            John Hammond
                        </td>
                        <td>
                            United States
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Mudassar Khan
                        </td>
                        <td>
                            India
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Suzanne Mathews
                        </td>
                        <td>
                            France
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Robert Schidner
                        </td>
                        <td>
                            Russia
                        </td>
                    </tr>
                </table>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

Demo