How to make controls scrollable (GridView, DropDownList, CheckBoxList etc)

Envelope your control inside of a div that has it’s vertical (overflow-y) set to scroll and horizontal (overflow-x) set to hidden. This will create a vertically container for your control. Useful in cases when you have long sets of data that you want to scroll through them (example GridView).

<style type="text/css">
    .ScrollDiv
    {
        border-color: Gray;
        border-style: solid;
        border-width: 1px;
        height: 200px;
        width: 210px;
        overflow-y: scroll;
        overflow-x: hidden;
    }    
</style>
        <div class="ScrollDiv">
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                <asp:ListItem>Test1</asp:ListItem>
                <asp:ListItem>Test2</asp:ListItem>
                <asp:ListItem>Test3</asp:ListItem>
                <asp:ListItem>Test4</asp:ListItem>
                <asp:ListItem>Test5</asp:ListItem>
                <asp:ListItem>Test6</asp:ListItem>
                <asp:ListItem>Test7</asp:ListItem>
                <asp:ListItem>Test8</asp:ListItem>
                <asp:ListItem>Test9</asp:ListItem>
                <asp:ListItem>Test10</asp:ListItem>
                <asp:ListItem>Test11</asp:ListItem>
                <asp:ListItem>Test12</asp:ListItem>
                <asp:ListItem>Test13</asp:ListItem>
                <asp:ListItem>Test14</asp:ListItem>
            </asp:CheckBoxList>
        </div>
Advertisements

2 thoughts on “How to make controls scrollable (GridView, DropDownList, CheckBoxList etc)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s