now according to given code custom scrolling applied on body but i want to apply it only where classdropdownmenunow according to given code custom scrolling applied on bodybut i want to apply it only where classdropdownmenultul class34dropdownmenu34 style34width250pxmaxheight300pxoverflowxauto34gt ltaspGridView ID34grdnotification34 runat34server34gtltaspGridViewgtltulgt ltstyle type34textcss34gt For the 34inse

Hi mukesh1Check this exampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltlink type34textcss34 rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery331jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs34gtltscriptgt ltstyle type34textcss34gt html overflow auto customScrollBar position absolute top 0px left 0px bottom 0px right 0px padding 0px overflowy scroll overflowx hidden Let39s get this party started

Apply custom Scrollbar CSS to DropDown menu class using CSS

mukesh1

SOLVED CLOSED ACTIVE ANSWERED
User: mukesh1
Posted: on May 10, 2018 03:46 AM
Forum: HTML and CSS
Answer: 1
Views: 19392
Sample Code: Download

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); 
}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 10, 2018 04:06 AM
Modified: on May 10, 2018 04:21 AM
Report

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

Apply custom Scrollbar CSS to DropDown menu class using CSS

Company

Explore

Follow us

Contact Us