I have a "container" div that has several divs inside of it, one for the title, one for a page status, one for controls, and one for where the data will be displayed. The container div has a fixed height and its overflow is set to hidden. When I submit the page, the data gets populated into the "data" div. If the data is to large for the data div, the data div gets a scroll bar and the user is able to see all of the data (data div's overflow is set to auto). Everything works great with no AJAX.
When I add AJAX however, my data div no longer gets its scroll bar and the data gets clipped. I can set the "container" div's overflow to auto and then I can see all of my data, however this defeats what I am trying to accomplish. I would like only the data div to scroll, which it does just fine without AJAX.
Relevant HTML/ASP.NET:
<asp:UpdatePanel ID="updatePage" runat="server" EnableViewState="false" RenderMode="Inline">
<ContentTemplate>
<div id="divCONTAINER" class="CONTAINER_WIDE_TALL">
<div id="divCONTAINER_TITLE" class="CONTAINER_TITLE">BACK OFFICE REPORTS</div>
<div id="divCONTAINER_STATUS" class="CONTAINER_STATUS" title="Page Status Information will appear in this area.">
<asp:Label ID="lblPageStatus" runat="server"> <br /> </asp:Label></div>
<div id="divCONTAINER_CONTROLS" class="CONTAINER_CONTROLS">
<table width="100%" align="center" border="0">
<tr>
<td align="left" width="55%">
<label class="Title">Report List: </label>
<asp:DropDownList ID="cboReports" runat="server" Width="85%">
</asp:DropDownList>
</td>
<td align="right" valign="middle" width="20%">
<label class="Title">Trade Date: </label>
<asp:TextBox ID="txtDate" Width="30%" runat="server" EnableViewState="true"></asp:TextBox>
</td>
<td align="right" valign="middle" width="20%">
<label class="Title">Find Text/Symbol: </label>
<asp:TextBox ID="txtSymbol" Width="30%" runat="server" EnableViewState="true"></asp:TextBox>
</td>
<td valign="middle" width="5%" rowspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="GO" ToolTip="Click to Search for Specified Data"
CausesValidation="true" UseSubmitBehavior="true" />
</td>
</tr>
<tr>
<td valign="middle" align="left" colspan="3">
<label class="Title">Firms: </label>
<asp:PlaceHolder ID="phFirms" runat="server"></asp:PlaceHolder>
</td>
</tr>
</table>
</div>
<div id="divCONTAINER_DATA" class="CONTAINER_DATA">
<asp:Literal ID="litReports" runat="server" EnableViewState="false"></asp:Literal>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Relevant CSS:
div.CONTAINER_WIDE_TALL
{
height: 700px;
background-color: #EAEAEA;
margin: auto;
border-color: Black;
border-style: solid;
border-width: 2px;
overflow:hidden;
}
div.CONTAINER_TITLE
{
float: none;
background-color:Transparent;
margin: auto;
font-size:larger;
font-weight:bold;
text-align:center;
}
div.CONTAINER_STATUS
{
float: none;
background-color: Transparent;
margin: auto;
font-size: larger;
font-weight: bold;
text-align: center;
}
div.CONTAINER_CONTROLS
{
background-color: #FFFFCC;
text-align: center;
font-family: Verdana, Arial, Garamond;
font-size: small;
border-color: Black;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
}
div.CONTAINER_DATA
{
padding: 0;
margin-left: auto;
margin-right: auto;
overflow: auto;
position:relative;
}