When the Div hits an overflow situation and the vertial scroll bars appear for the Div. You scroll down with the scroll bars for the div and the base for rad grid stays stationary (Along with the header), however the data itself scrolls down with the bar. It floats over other objects in the Div. I have two labels, two textboxes and two command buttons below the grid. Once you start scrolling the data just scrolls right over them which obstructs the users view of the other objects. Has anyone experianced this and how did yo go about resolving?
<
asp:Content ID="Content1" ContentPlaceHolderID="ImageLibraryContent" Runat="Server">
<
div id='abc' class="codebox">
<asp:table ID="Table1" runat="server" Width="98%">
<
asp:tablerow>
<
asp:TableCell Width = "500px" VerticalAlign="Top" >
<rad:RadGrid ID="grdImages" runat="server" Skin="Outlook2007" Width="430px" height="324px" GridLines="None" AllowPaging="False" EnableAJAX="False">
<ClientSettings EnablePostBackOnRowClick = "true" Scrolling-AllowScroll = "true" Scrolling-UseStaticHeaders="true" >
</ClientSettings>
<MasterTableView autogeneratecolumns="False" DataKeyNames = "ImageId,PartCode,DoubleSided" >
<Columns>
<rad:GridBoundColumn DataField="PartCode" HeaderText="Part #" UniqueName="PartCode" >
<ItemStyle HorizontalAlign="Left" Width = "90px"></ItemStyle>
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="PartDescription" HeaderText="Description" >
<ItemStyle HorizontalAlign="Left" Width = "340px"></ItemStyle>
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="ImageID" UniqueName="ImageID" Visible ="false" >
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="DoubleSided" UniqueName="DoubleSided" Visible ="false" >
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="FrontSideExtension" UniqueName="FrontSideExtension" Visible ="false" >
</rad:GridBoundColumn>
<rad:GridBoundColumn DataField="BackSideExtension" UniqueName="BackSideExtension" Visible ="false" >
</rad:GridBoundColumn>
</Columns>
</MasterTableView>
</rad:RadGrid>
<br />
<asp:Table ID="Table3" runat="server" align="Left" >
<asp:TableRow >
<asp:TableCell Width="10%">
</asp:TableCell>
<asp:TableCell >
<asp:Label ID="lblSearchPartNumber" runat="server" Text="Part #:" Width="45px" TabIndex="9"></asp:Label>
</asp:TableCell>
<asp:TableCell >
<asp:TextBox ID="txtSearchPartNumber" runat="server" TabIndex="1"></asp:TextBox>
</asp:TableCell>
<asp:TableCell >
<asp:Button ID="btnSearchPartNum" runat="server" Text="Search" Width="153px" TabIndex="2" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow >
<asp:TableCell Width="10%">
</asp:TableCell>
<asp:TableCell >
<asp:Label ID="lblSearchDescription" runat="server" Text="Description:" Width="75px" TabIndex="10"></asp:Label>
</asp:TableCell>
<asp:TableCell >
<asp:TextBox ID="txtSearchDescription" runat="server" TabIndex="3"></asp:TextBox>
</asp:TableCell>
<asp:TableCell >
<asp:Button ID="btnSearchDescription" runat="server" Text="Search" Width="153px" TabIndex="4" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:TableCell>
<asp:TableCell >
<asp:Table ID="Table2" runat="server" Width= "60%" Border="1">
<asp:TableHeaderRow ><asp:TableHeaderCell runat="server" ID="HeaderCell" nbsp</asp:TableHeaderCell></asp:TableHeaderRow>
<asp:TableRow >
<asp:TableCell HorizontalAlign="Left" >
<asp:Image ID="ImageFront" width="300px" height="190px" BorderWidth = "1" runat="server" AlternateText = "No Image" GenerateEmptyAlternateText ="true" Style="z-index: 100;" onclick="ShowImage(this.src);" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ><asp:TableCell HorizontalAlign="Left"><b>Front Image</b></asp:TableCell></asp:TableRow>
<asp:TableRow >
<asp:TableCell HorizontalAlign="Left" >
<asp:Image ID="ImageBack" width="300px" height="190px" BorderWidth = "1" runat="server" Style="z-index: 100;" onclick="ShowImage(this.src)" AlternateText="No Image" GenerateEmptyAlternateText="True" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ><asp:TableCell HorizontalAlign="Left"><b>Back Image</b></asp:TableCell></asp:TableRow>
</asp:Table>
</asp:TableCell>
</asp:tablerow>
<asp:TableRow>
<asp:TableCell>
</asp:TableCell>
<asp:TableCell>
</asp:TableCell>
<asp:TableCell>
<asp:Button ID="btnDisassociate" runat="server" Style="z-index: 109;" Text="Delete" Height="30px" Width="65px" TabIndex="5" Enabled = "false" OnClientClick="return delAlert()" />
</asp:TableCell>
</asp:TableRow>
</asp:table>
<radW:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Outlook">
<Windows>
<radW:RadWindow
ID="RadWindow1"
runat="server"
Height="300px"
Left="200px"
Skin="Outlook"
SkinsPath="~/RadControls/Window/Skins"
Title="Search for Customer"
Top="100px"
Width="600px" VisibleStatusbar="False" />
</Windows>
</radW:RadWindowManager>
<script type="text/javascript">
function ShowImage(id)
{
var cpdRepWindow;
id = escape(id)
id = id.replace(
"+", "%2B");
id = id.replace(
"/", "%2F");
cpdRepWindow =
"PartImageWindow.aspx?ImageID=" + id;
window.radopen(cpdRepWindow,
"RadWindow1");
}
</script>
<script language="JavaScript" type="text/javascript">
<!-- Hide;
function delAlert()
{
return confirm("Are you sure you want to remove this item?")
}
// -->
</script>
</div>
</
asp:Content>
1 Answer, 1 is accepted
I suspect that the issue you observed is due to the position: relative setting for the grid scrollable data div. Does setting position: absolute through the style attribute of the wrapper div or the asp Content itself alleviates the abnormality?
Also check whether this issue appears under IE only or is cross-browser as I suspect this might be an oddity with relatively positioned scrollable elements in this scenario.
Kind regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.