Apply custom Scrollbar CSS to DropDown menu class using CSS

Last Reply 13 days ago By dharmendr

Posted 14 days 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 13 days ago.
Posted 13 days ago Modified on 13 days 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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html