Apply custom Scrollbar CSS to DropDown menu class using CSS

Last Reply 10 months ago By dharmendr

Posted 10 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 10 months ago.
Posted 10 months ago Modified on 10 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