Resize animation with RoundedCorners

I have

<div id="div2" runat="server" style='width: 300px; height: 200px; background-color: teal; position: absolute;'>

and

<cc2:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
<cc2:RoundedCornersProperties Radius="10" TargetControlID="div2"></cc2:RoundedCornersProperties>
</cc2:RoundedCornersExtender>

and

<cc2:AnimationProperties TargetControlID="div1">
<Animations><OnHoverOver>
<Resize AnimationTarget="div2" Width="500" Height="400" />
</OnHoverOver></Animations>
</cc2:AnimationProperties>

and when i hover over div1... only width changes. A bug?

Hi MarekG,

This is a consequence of the way that RoundedCorners works. It will wrap your target control in another div and set the height of the new div to be the same. If the inner height changes it won't propogate to the containing wrapper (i.e. you're resizing the wrapped control, but it's overflow is hidden by its wrapper so you see nothing happen).

Right now there isn't a way to work around this - but I hope to make some modifications to the Animation framework on the next release that will allow you to side step the issue.

Thanks,
Ted

ResizeControlExtender causes panel to have 0px width and 0px height

All,

I am adding a ResizeControlExtender to a panel that already has a DragPanelExtender and am getting some very odd behavior. The window I want to resize is created dynamically and I add the ajax extender programatically as well. I am able to put a resize handle on the popup window but when I mouse over the handle the panel collapses to 0px width and 0px height. I have specified all of the properties as follows:

ResizableControlExtender resizeWindow = new ResizableControlExtender();

resizeWindow.ID = "timePanelResize" + i;
resizeWindow.TargetControlID = "timePanel" + i;
resizeWindow.HandleCssClass = "handleImage";
resizeWindow.ResizableCssClass = "resize";
resizeWindow.MinimumWidth = 200;
resizeWindow.MaximumWidth = 200;
resizeWindow.MinimumHeight = 24;
resizeWindow.MaximumHeight = 600;
resizeWindow.HandleOffsetX = 186;
resizeWindow.HandleOffsetY = 187;
dragWindowPanel.Controls.Add(resizeWindow);

I am using c#, .Net 2.0, AJAX v1.0.61025, IE 7 and Firefox 2.01. on mouse over the following behavior occurs; In IE it flickers and collapses in Firefox it flickers and the height collapses to the min height. Also, the handle is extremely difficult to grab... Also, the mouse must be in exactly the right pixel position (about 1px wide and tall) in order to grab the handle.

Anybody else see behavior like this? If so, is there a solution?

Thanks,

Kevin

There's an old forum thread about this, but the gist is that you add another Panel/DIV wrapper so the two extenders can point at/modify different HTML elements.

RoundCornersExtender both right corners are outside the bounds of the div

On IE, my panel appears with the corner border missing chunks. Actually, the border runs outside the width of the div because
ASP.NET renders the corner DIVs with a margin-right of 6px through -2px (for a radius of 8). This causes the last two pixels
to not show up.

This renders perfectly under FireFox.

Created a panel with a rounded corner extender on it like this:

 <asp:Panel ID="pnlAddMeToYourBlackBook" runat="server" Width="147px" BackColor="#ebf5ff" Style="margin-top: 2px"> <div style="padding-left: 10px"> <table cellspacing="0" cellpadding="0" width="124px" border="0"> <tr valign="top" align="left"> <td width="26px"> <asp:ImageButton ID="btnImgBlackBook" runat="server" ImageUrl="~/images/SearchResults/graphics/prof_icon_blackbook2.gif" BorderStyle="None" Width="18px" Height="18px" ToolTip="Add this user to your Black Book" ImageAlign="absmiddle"></asp:ImageButton></td> <td> <asp:LinkButton ID="btnBlackBook" runat="server" CssClass="lc_prof_comm_link">Add me to your<br>Black Book</asp:LinkButton></td> </tr> </table> </div> </asp:Panel>

<
cc1:RoundedCornersExtenderID="rcAddMeToYourBlackBook"runat="server"BorderColor="#7eb1e6"Corners="Bottom"Radius="8"TargetControlID="pnlAddMeToYourBlackBook">
</
cc1:RoundedCornersExtender>

Does anyone have a suggestion for why this is rendered this way?

Thanks
Larry

Anyone have a clue on this?

SomthingI failed to mention was that the corners worked perfectly on IE when I was building in a separate project. Then when I incorporated the page into the main website (very large, lots of legacy stuff, css, prototype libs, ajaxpro libs, etc.), the corners started messing up. Does anyone know what could be conflicting with ASP.NET AJAX in a chaotic environment like this?

Thanks,
Larry

Rounded Corners - Bizarre Width Effects

I'm new to Ajax and just built a web page to test assorted effects that I want to use right away. One of the most straightforward - Rounded Corners - I can't get working correctly. Here are two screenshots exemplifying the problem:

Here's the pertinent HTML and CSS code:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax_Test_1._Default" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="http://links.10026.com/?link=styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br /
<div>
Rounded corners:<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="purpleButton" BackColor="#C0C0FF">Dummy Link</asp:LinkButton>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="LinkButton1" BorderColor="128, 128, 255" Color="192, 192, 255" Radius="6">
</cc1:RoundedCornersExtender>

purpleButton
{
background-color:#C0C0FF;
width:75px;
text-align:center;
}

.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup
{
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

It's strange that the width value in the CSS file has no effect. Yet if I specify the width directly in the HTML then it fixes the problem in IE7. Nothing I do seems to change anything in Firefox 2.0

Any ideas?

Robert Werner
Vancouver, BC

Add display: block; to your purpleButton class. That'll fix it.

Just tried what you suggested. Sorry, but this doesn't do a thing. Here's the full source code: http://mwtech.com/downloads/public/AjaxTest.zip

Robert

display: block; is necessary, but you also need to add a "." before purpleButton in your CSS. The class name needs to be .purpleButton in styles.css for it to be available for reference as purpleButton in the CssStyle property in your asp.net code.

You are correct! Thank you for that tip!

I just removed all width settings from the HTML and found that in the CSS I had to set "width" to some value first before I could control the actual width using "min-width". Very odd IMHO. Maybe one day I'll fully understand all the quirks of CSS!!!

Robert

Rounded Corners cannot accept Width = "__%"

Hopefully, somebody may be able to tell me if I'm doing something wrong here.

All I'm trying to do ismake a panel sit inside of another panel.
Theinner panel must have rounded corners and both panelsmust resize with the browser window.

Without Atlas RoundedCorners I can say:

<asp:PanelID="OuterPanel"runat="server"BorderColor="Black"BorderStyle="Solid"BorderWidth="1px"BackColor="blue"
Style="left: 5%; top: 5%; position: relative"Height="90%"Width="90%">

<asp:PanelID="InnerPanel"runat="server"BorderColor="Black"BorderStyle="Solid"BorderWidth="1px"BackColor="red"
Style="position: absolute; margin-left:10%; margin-top:12%"Height="73%"Width="90%">
</asp:Panel>

</asp:Panel>

and everything behaves and looks fine (minus the rounded corners) - this includes both panels resizing with the window

However... once I add the RoundedCornersExtender and point it at the Inner Panel

<cc1:scriptmanagerid="ScriptManager1"runat="server"/>
<cc2:roundedcornersextenderid="RoundedCornersExtender1"runat="server">
<cc2:RoundedCornersPropertiesRadius="10"TargetControlID="InnerPanel"/>
</cc2:roundedcornersextender>

...The graphics get all confused.
Yes, I've got the rounded corners, but 2 things are wrong.

1. The inner panel stops resizing in Width (resizes ok in height)
2. It looks like a transparent box of almost the same height as the panel is missing from the right of the Inner panel.

The really wierd thing is:
If (on the Inner Panel) I replaceWidth="90%"for Width="700px" Then the above 2 problems are fixed.

But, that leaves me with a panel that doesn't resize with the rest of the controls on my page - totally defeating the point !!

I don't understand why this Atlas control works fine with Height="90%", but not Width="90%"

Can anyone help ?
I've been struggling for ages with this !

Thanks,
Scott

So, no-one has any thoughts on this ?

Aren't there any Atlas type officials out there at least willing to recognise this bug ??

From what I can tell this is a bug... you cannot set the height or width to xxx% when using the Rounded Corners extender. It has never worked for me. So I just make sure that the data I put into the panel is of a predefined height,

Dunno if it will ever get fixed.

Cheers
Graeme

Check out our free rounded panel control for ASP.NET 2, also our free security code image control.http://www.roundedpanel.baysoft-net.co.uk. Hope this helps. It's pretty flexible.

You've got one panel with position: relative and another with position: absolute and you expect them to behave the same? Not going to happen. remove the position: absolute from the second panel.

Also, it looks like you might have an older version of the AJAX Toolkit because of the RoundedCornersProperties entity. Those properties should be in the RoundedCournersExtender tag. I'd recommend downloading the latest version of the toolkit.

Rounded Corners Border Width

Is it possible to increase the width of the rounded corners border?

Thanks.

Hi Ndroe,

As far as I know, you can rewrite the RoundedCornersExtender's buildParentDiv function to what you expect. Also you can use Javascript to change its css styles on pageLoad event since it is a Dom element. But unfortunately, all this seems not to be a easy task.

For your situation, I think you may build Corners manually by using corner and line picture + HTML. Just like this:http://www.microsoft.com/en/us/default.aspx

I hope this help.

Best regards,

Jonathan

RoundedCorners not displaying vertical border

I have the following code for RoundedCorners.
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="500px" >
<div style="padding:10px;text-align:center">
<div style="padding:5px; border:solid black thin;background-color:#B4B4B4;">
ggggggggggggggggggggggggggggg
</div>
</div>
</asp:Panel>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
<cc1:RoundedCornersProperties TargetControlID="Panel1" Radius=2 Color="red" />
</cc1:RoundedCornersExtender
This only shows me horizontal border but not the vertical border. It shows me top and bottom border in red. Not left and right. What am I doing wrong?I'm not exactly sure what you mean, but I think you get the borders by replacing the first div tag with:

<div style="padding:10px;text-align:center;border-left:solid 1px red;border-right:solid 1px red"
I did that. It works. Thx. However, there is a gap between bottom horizontal line and left and right vertical lines

RoundedCornersExtender bug

The target control's width does not change when the browser windows's size is changed.Try giving it a width=100%:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="Panel1" runat="server" style="width:100%;background-color:Lime"> Text </asp:Panel> <atlasToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"> <atlasToolkit:RoundedCornersProperties TargetControlID="Panel1" /> </atlasToolkit:RoundedCornersExtender> </div> </form></body></html>

That is exactly what I did.

If the orginal browser windows is not at maximum size. Click at the browser titlebar to maximum the browser windows' size, the panel's width would not change accordingly. If I remove the roundedcornersextender, everything works fine

I just verified that the code I gave above works in IE7 and Firefox. What browser are you using?

If you put the style in a css file,then the problem shows up.

<%@.PageLanguage="C#" %>

<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Untitled Page</title>

<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<formid="form1"runat="server">

<div>

<atlas:ScriptManagerID="ScriptManager1"runat="server"/>

<asp:PanelID="Panel1"runat="server"CssClass="pnl">

Text

</asp:Panel>

<atlasToolkit:RoundedCornersExtenderID="RoundedCornersExtender1"runat="server">

<atlasToolkit:RoundedCornersPropertiesTargetControlID="Panel1"/>

</atlasToolkit:RoundedCornersExtender>

</div>

</form>

</body>

</html>

In theStyleSheet.css

.pnl

{

background-color:#ccffff;

width:100%;

}

BTW,I am using IE6

Okay. Bad news, I think. Here's the relevant code from RoundedCornersBehavior.js:

} else {
// Note: Do NOT use CommonToolkitScripts.getCurrentStyle in the check below
// because that breaks the work-around
if (!e.style.width && (0 < originalWidth)) {
// The following line works around a problem where IE renders the first
// rounded DIV about 6 pixels too high if e doesn't have a width or height
e.style.width = originalWidth + "px";
}
}

It's the use of "e.style.width" that causes this to stop working if you move the style to a file (or even a <style> element). But the fix of using getCurrentStyle means that the workaround doesn't fire when it needs to and you hit the weird rendering problem in IE.

If it's possible to put the "width:100%" style on the element itself, I'd highly recommend doing so.