Hello everyone,
I am fairly new to ASP.NET and the AJAX toolkit but I had a question that I am sure there must be an answer for in these forums but I have yet to find it.
I have created several draggable panels that also collapse/expand and I am trying to also make them resizeable. I have looked at numerous postings that refer to the resizeable option but I must be doing something wrong.
The other challenge I have is to make a specific panel come to to the top once activated it. At the moment only 1 of the panels is "on top" and the others are dragable but still "underneath". I am not sure how to fix that.
Any ideas or links to previous posts that would outline how to do this would be appreciated.
Many thanks
Joey
Hi,Joey
I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.
To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.
Thank you.
HelloJin-Yu Yin,
I have 2 dragable panels at the moment and am still trying to figure out how to resize them
Here is the source code that I am working with at the moment:
<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dragable/Expandable panels</title>
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<!-- start collapsable panel code -->
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelBody"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="False"
TextLabelID="Label1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="images/arrow_up1.gif"
CollapsedImage="images/arrow_dn1.gif"
SuppressPostBack="true">
</cc1:CollapsiblePanelExtender>
<!-- end collapsable panel code -->
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
</cc1:DragPanelExtender>
<div>
<asp:Panel ID="PanelContainer" runat="server" cssClass="dragContainer" style="z-index: 101; left: 140px; position: absolute; top: 210px">
<asp:Panel ID="PanelHeader" runat="server" cssClass="dragHeader">
<!-- start elements inside header -->
<table width="250" border="0">
<tr>
<td><table width="95%" border="0" align="center">
<tr>
<td><p><font color="#FFFFFF"><strong>Pick an Option</strong></font></p></td>
<td><img src="http://pics.10026.com/?src=images/arrow_up1.gif" width="15" height="15" align="right"></td>
</tr>
</table></td>
</tr>
</table>
<!-- end elements insideheader -->
</asp:Panel>
<asp:Panel ID="PanelBody" runat="server" cssClass="dragBody"
<!-- start elements inside body-->
<table width="250" border="0" bgcolor="#e3f1fe"
<tr>
<td bgcolor="#99BDEA"><div align="center"><img src="http://pics.10026.com/?src=images/icons1.gif" width="206" height="19"></div></td>
</tr>
<tr>
<td><table width="90%" border="0" align="center">
<tr>
<td colspan="2"> <form name="form1">
<select name="select" onChange="MM_jumpMenu('parent',this,0)">
<option selected>Choose Option</option>
<option>Price 1</option>
<option>Price 2</option>
<option>Price 3</option>
<option>Price 4</option>
</select>
</form></td>
</tr>
</table></td>
</tr>
</table>
<!-- end elements inside Listing Status body -->
</asp:Panel>
</asp:Panel
</form>
<!-- start Javascript needed to drag panel, only required once -->
<script type="text/javascript">
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
window.attachEvent('onresize', setBodyHeightToContentHeight);
</script>
<!-- start Javascript needed to drag panel -->
</body>
</html>
Any help would be appreciated.
Thanks
Joey
