Only Data Grid should be scrollable!

[Guest]

Hi,

I have a web page (asp.net, code:c#). I havean html table with text boxes.
Based on the user input , records are displayed in the data grid below it.
Now the datagrid has a large no. of columns. & depending on what the user
enters, the data grid can grow very large. So to avoid scrolling the whole
page, I just want the data grid to be scrollable. For this I used the <div>
tags around the data grid,
<div id="DGMainHolder"style="OVERFLOW:scroll;WIDTH:960px;HEIGHT:900px">
<aspataGrid>all data grid code here</asp:dataGrid>
</div>

But when I vertically scroll the grid , the grid enters into the html table
with text boxes at the top. Also at the top is an image. I just want to make
the data grid vertically scrollable, so that it doesnt get inside the
controls above it.

My HTML code is:
<form id="Form1" method="post" runat="server">

<asp:image id="Image1" style="Z-INDEX: 102; LEFT: 389px; POSITION:
absolute; TOP: 8px" runat="server"
ImageUrl="file:///C:\Documents and Settings\pmud\My
Documents\images\small.jpg"></asp:image><asp:label id="Label1"
style="Z-INDEX: 103; LEFT: 400px; POSITION: absolute; TOP: 119px"
runat="server"
Font-Bold="True" Font-Underline="True" Width="96px">VIEW
LOGS</asp:label><asp:linkbutton id="LinkButton1" style="Z-INDEX: 104; LEFT:
94px; POSITION: absolute; TOP: 99px"
runat="server" Width="9px" Height="3px">Home</asp:linkbutton></td>

<TABLE id="Table1" style="Z-INDEX: 107; LEFT: 303px; WIDTH: 305px;
POSITION: absolute; TOP: 148px; HEIGHT: 91px"
cellSpacing="1" cellPadding="1" width="305" border="1">
<TR>
<TD style="WIDTH: 126px; HEIGHT: 25px">
<asp:label id="lblCompany" runat="server" Font-Bold="True"
Width="117px" Height="5px">Company Name</asp:label></TD>
<TD style="HEIGHT: 25px">
<asp:textbox id="txtCompany" runat="server" Width="139px"
Height="24px"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 126px; HEIGHT: 27px">
<asp:label id="lblMonth" runat="server" Font-Bold="True"
Width="91px" Height="5px">Month</asp:label></TD>
<TD style="HEIGHT: 27px">
<asp:dropdownlist id="ddlMonth" runat="server" Width="115px"
Height="8px">
<asp:ListItem Value="None">None</asp:ListItem>
<asp:ListItem Value="January">January</asp:ListItem>
<asp:ListItem Value="Feburary">Feburary</asp:ListItem>
<asp:ListItem Value="March">March</asp:ListItem>
<asp:ListItem Value="April">April</asp:ListItem>
<asp:ListItem Value="May">May</asp:ListItem>
<asp:ListItem Value="June">June</asp:ListItem>
<asp:ListItem Value="July">July</asp:ListItem>
<asp:ListItem Value="August">August</asp:ListItem>
<asp:ListItem Value="September">September</asp:ListItem>
<asp:ListItem Value="October">October</asp:ListItem>
<asp:ListItem Value="November">November</asp:ListItem>
<asp:ListItem Value="December">December</asp:ListItem>
</asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 126px">
<asp:label id="Label2" runat="server" Font-Bold="True" Width="5px"
Height="5px">Year</asp:label></TD>
<TD>
<asp:textbox id="txtYear" runat="server" Width="126px"
Height="25px"></asp:textbox></TD>
</TR>
</TABLE>

<asp:button id="btnSubmit" style="Z-INDEX: 101; LEFT: 397px; POSITION:
absolute; TOP: 261px"
runat="server" Text="Submit"></asp:button></td>
<div id="DGMainHolder"
style="OVERFLOW:scroll;WIDTH:960px;HEIGHT:900px"><asp:datagrid id=DataGrid1
style="Z-INDEX: 105; LEFT: 0px; POSITION: absolute; TOP: 478px"
runat="server" ForeColor="Black" CellPadding="4" BackColor="#CCCCCC"
CellSpacing="2" BorderWidth="3px" BorderStyle="Solid" BorderColor="#999999"
AutoGenerateColumns="False" DataKeyField="AsiOrder#" DataMember="FormFields"
DataSource="<%# dsCompany1 %>">
<FooterStyle BackColor="#CCCCCC"></FooterStyle>
<SelectedItemStyle Font-Bold="True" ForeColor="White"
BackColor="#000099"></SelectedItemStyle>
<ItemStyle BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="White"
BackColor="Black"></HeaderStyle>
<Columns>
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update"
CancelText="Cancel" EditText="Edit"></asp:EditCommandColumn>
<asp:BoundColumn DataField="Date" SortExpression="ActivationDate"
ReadOnly="True" HeaderText="Date"
DataFormatString="{0:d}">
<ItemStyle Width="70px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Region" SortExpression="Region"
ReadOnly="True" HeaderText="Region">
<ItemStyle Width="55px"></ItemStyle>
</asp:BoundColumn>
<

<asp:BoundColumn DataField="CompanyRepID"
SortExpression="CompanyRepID" ReadOnly="True" HeaderText="Company RepID">
<ItemStyle Width="35px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Account#" SortExpression="Account#"
ReadOnly="True" HeaderText="Account">
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="UserName" SortExpression="UserName"
ReadOnly="True" HeaderText="User">
<ItemStyle Width="60px"></ItemStyle>
</asp:BoundColumn>

</Columns>
<PagerStyle HorizontalAlign="Left" ForeColor="Black"
BackColor="#CCCCCC" Mode="NumericPages"></PagerStyle>
</asp:datagrid></div>
</body>
</form>

 

[Mortar]

not sure if this will help but the following is what i use to have a
vertical only scroll in my page..it's basically a datagrid inside a
div, which is inside another div:

<DIV id="divLog" style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT:
0px; BORDER-TOP: black 1px solid; DISPLAY: inline; PADDING-LEFT: 0px;
Z-INDEX: 115; LEFT: 368px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW:
auto; BORDER-LEFT: black 1px solid; WIDTH: 401px; PADDING-TOP: 0px;
BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 544px;
HEIGHT: 116px; BACKGROUND-COLOR: #d8e1ea; TEXT-ALIGN: center"
ms_positioning="FlowLayout">
<div id="divLogmid" style="MARGIN-TOP: 2px; MARGIN-LEFT: 2px;
MARGIN-RIGHT: 2px"><b>Contact
Log</b> | New Contact</font><br>
<br>
<asp:datagrid id="dgLog" style="Z-INDEX: 118" runat="server"
BackColor="#D8E1EA" EnableViewState="false"
HeaderStyle-BackColor="#cccccc"
AutoGenerateColumns="false" GridLines="None" Width="373px"
BorderStyle="None">
<Columns>
<asp:BoundColumn DataField="Date" HeaderText="Date">
<ItemStyle Width="85px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Person" HeaderText="Rep">
<ItemStyle Width="85px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Result"
HeaderText="Result">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="Comment"
HeaderText="Comment">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundColumn>
</Columns>
</asp:datagrid>
</div>
</DIV>

 

[Eliyahu Goldin]

You are using Grid layout all the time. Flow layout usually is a better
option, especially if you are using tables anyway. For your grid just
replace absolute positioning with width:100%. Also set overflow style for
the <div> to auto.

Eliyahu

 

[Guest]

Hi Mortar,

Thanks. You solved my problem. But instead of using 2 <div> tags, i used
only 1 , the 1st one of yours and it qnswered my question.