Issue when creating scrollable gridview in asp.net

Actual result in header
Hello,

I have a gridview in an asp.net page that I am attempting to make scrollable.  When I do so (see code at bottom), the distribution of the header cells becomes skewed.  Can anybody please help me fix this issue.  Thanks a lot!


CSS Code:
.header
 {
   font-weight:bold;
position:absolute;
height: 20px;
width: 428px;
 }

Gridview in actual asp page:
**Note that the gridview itself is inside of a div with overflow scrolling**

 <td border: thin solid #000080"
                    valign="top"><div style="overflow-y:scroll; height: 200px" >
                    <asp:GridView ID="Students" onselectedindexchanged="StudentSelect"
                        runat="server" RowStyle-VerticalAlign="Bottom"

                        AllowSorting="True" AutoGenerateColumns="False" DataSourceID="StudentsList"
                        Height="30px" Width="430px" PageSize="25"
                            onrowdatabound="Students_RowDataBound">
                        <RowStyle Font-Size="Smaller" />
                        <Columns>
                        <asp:TemplateField ItemStyle-Width="10" > 
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="chkYourCheckBoxField" />
                            </ItemTemplate>

<ItemStyle Width="3%"></ItemStyle>
                         </asp:TemplateField>
                            <asp:CommandField ShowSelectButton="True" ItemStyle-Width="10">
<ItemStyle Width="5%"></ItemStyle>
                            </asp:CommandField>
                            <asp:BoundField DataField="row_id" HeaderText="ID" ItemStyle-Width="10%"
                                SortExpression="row_id" InsertVisible="False" ReadOnly="True" >
<ItemStyle Width="10%"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="Column1" HeaderText="Name" ItemStyle-Width="15%"
                                SortExpression="Column1" ReadOnly="True" >
<ItemStyle Width="15%"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="age" HeaderText="Age"  ItemStyle-Width="5%"
                                SortExpression="age" >
<ItemStyle Width="5%"></ItemStyle>
                            </asp:BoundField>
                        </Columns>
                        <HeaderStyle CssClass="header" BackColor="#000066" ForeColor="#FFFF66" />
                        <EditRowStyle Font-Size="Smaller" />
                        <AlternatingRowStyle BackColor="#FFFF66" Font-Size="Smaller" />
                    </asp:GridView>
                    </div>
                    </td>

C# code to make the first row double so that the header doesnt cover it:
  protected void Students_RowDataBound(object sender, GridViewRowEventArgs e)


     {
        if (e.Row.RowType == DataControlRowType.DataRow)
         {
             if(e.Row.RowIndex == 0)
            e.Row.Style.Add("height","40px");
         }
          }

}
uconnfb13Asked:
Who is Participating?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.