Do I need to actually place empty panels around the page to allow for extra dragable area?
Thanks
-Mike
Add this to the page:
<style type="text/css">
body { height:100%; }
</style>
And you're good to go.
2012年3月26日月曜日
restricted draggable area
I am experiencing a something peculiar with the DragOverlayExtender and DragPanelExtender. There seems to be a defined area where the panel can be placed. For example, there is extra white space at the bottom of the page; however, when i try to place the panel lower than the last control on the page, it pops back to it's last position.
2012年3月21日水曜日
RoundedCornersExtender and Panel visibility
Hello
I'm experiencing a few difficulties with the RoundedCornersExtender.
I was trying to show/hide a panel extended by the RoundedCornersExtender.
In the html part, i set the style of the panel this way : style="visibility:hidden;"
Then, with javascript, i do : document.getElementById("myPanel").style.visibility = "visible";
But my panel then does not appear as he should. He contents nothing....
Here's a few code :
the HTML part :<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center" style="visibility:hidden;"> Some Text here...</asp:Panel><ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All"></ajaxToolkit:RoundedCornersExtender><div onclick="doThing();">click me</div>
and the javascript part :
<script type="text/javascript"> function doThing() { document.getElementById('myPanel').style.visibility='visible'; } </script>Can someone help me to find a way to show/hide a panel with roundedCorners?
Thanks for your help
John
PS : Sorry for my poor english skills
Hi John,
The reason is that the 'myPanel' element isn't the one defined on your page anymore.
Once the element is extended by a RoundedConerExtender, the element itself will lose its ID. The RCExtender will then create a div element wrap the original element, and assign the ID of the original element to the new one.
So, you'll get this:
<div id='myPanel' > // this div is created by the RCExtender
<div style=....></div> // some other div representing the roundedcorner
<div style='visibility : hidden' >some text here</div> // your original element, note that it doesn't hold the ID anymore and its style is inherited from original settings in source
<div style=....></div> // some other div representing the roundedcorner
</div> //end of wrapper
As you can see, your script didn't change the visibility of the actual element. Thus it still can't be seen.
To workaround it, you may hide it via javascript when the page is loaded rather than set its visibility explicitly in source. For instance:
<%@. Page Language="C#" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center">
Some Text here.... Note that style property isn't set
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All">
</ajaxToolkit:RoundedCornersExtender>
<div onclick="doThing();">click me</div
<script type="text/javascript">
function doThing()
{
document.getElementById('myPanel').style.visibility='visible';
}
function pageLoad()
{ // this method is called when the page is loaded
document.getElementById('myPanel').style.visibility='hidden'; // this line hides the wrapper
}
</script>
</div>
</form>
</body>
</html>
Hope this helps.
Thanks a lot!
I didn't figure out that the new div without id was inheriting it's style from the previous one. I thought that only the new div that holds the id would...
Your solution works great for my problem.
Once again, thank you!
John
登録:
投稿 (Atom)