Rounded Corner Control

I was trying to use the rounded corner extender with panels. I have applied border to the panels. Whenever i use the extender with the panels the effect is there however it is not clearly visible as the border does not have the rounded corners. When i remove the border then the effect is clearly visible. Please help me using the rounded corner extender with the panels so that the border will have rounded corners.

Thanks and Regards,

Geevika

Hi Geevika

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.Before that , We also suggest that you should have a look at thishttp://www.asp.net/AJAX/Control-Toolkit/Live/RoundedCorners/RoundedCorners.aspx.

Here we provide a sample ,which is contained in Control Toolkit source code.

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">RoundedCorners Demonstration</div>

<asp:Panel ID="Panel1" runat="server" Width="330px" CssClass="roundedPanel">
<div style="padding: 10px; text-align: center">
<div style="padding: 5px; border: solid black thin; background-color: #B4B4B4;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX" /><br />
ASP.NET AJAX
</div>
</div>
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
BehaviorID="RoundedCornersBehavior1"
TargetControlID="Panel1"
Radius="6"
Corners="All" />

<div style="padding-top: 3px;">CornerRadius:</div>
<div style="padding: 10px;">
<input type="radio" id="radius0" name="radiusValues" value="0"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius0">None</label>

<input type="radio" id="radius2" name="radiusValues" value="2"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius2">2px</label>

<input type="radio" id="radius4" name="radiusValues" value="4"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius4">4px</label>

<input type="radio" id="radius6" name="radiusValues" value="6"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" checked="checked" />
<label for="radius6">6px</label>

<input type="radio" id="radius10" name="radiusValues" value="10"
onclick="$find('RoundedCornersBehavior1').set_Radius(this.value);" />
<label for="radius10">10px</label>
</div>

<div style="padding-top: 3px;">Corners:</div>
<div style="padding: 10px;">
<input type="checkbox" id="corner1" name="cornerValues" value="1"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner1">Top Left</label>

<input type="checkbox" id="corner2" name="cornerValues" value="2"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner2">Top Right</label><br />

<input type="checkbox" id="corner8" name="cornerValues" value="8"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner8" >Bottom Left</label>

<input type="checkbox" id="corner4" name="cornerValues" value="4"
onclick="$find('RoundedCornersBehavior1').setCorner(this.value, this.checked);" checked="checked" />
<label for="corner4">Bottom Right</label>
</div>

<div style="padding-top: 3px;">Border Color:</div>
<div style="padding: 10px;">
<input type="radio" id="color0" name="colorValues" value=""
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" checked="checked" />
<label for="color0">None</label>

<input type="radio" id="color1" name="colorValues" value="Black"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color1">Black</label>

<input type="radio" id="color2" name="colorValues" value="Red"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color2">Red</label>

<input type="radio" id="color3" name="colorValues" value="Aqua"
onclick="$find('RoundedCornersBehavior1').set_BorderColor(this.value);" />
<label for="color3">Aqua</label>
</div>
</div>

If your problem has been resolved or be resolved by the sample , please mark it as "Answered" or "Resolved", so our community members will not waste their time on a resolved issue. Otherwise, would you please provide a sample here? Thanks.

Best Regards,

Jonathan

Hi Jonathan,

Thanks for ur reply. The following is the part of the source code:

<asp:Panel ID="pnlCountry" runat="server" Style="position: relative; top: 24px; border-style: groove;
left: 8px; z-index: 101;" Height="125px" Width="950px" BackColor="#E0E0E0">

<asp:Label ID="lblCountryName" runat="server" Style="z-index: 100; left: 296px; position: absolute;
top: 32px" Text="Country Name" Width="104px"></asp:Label>
<asp:TextBox ID="txtCountryName" runat="server" Style="z-index: 101; left: 424px;
position: absolute; top: 32px"></asp:TextBox>
<asp:Button ID="btnCancelCountry" runat="server" Style="z-index: 106; left: 808px;
position: absolute; top: 80px" Text="Cancel" BackColor="Silver" />
<asp:Button ID="btnSaveCountry" runat="server" Style="z-index: 104; left: 712px;
position: absolute; top: 80px" Text="Save" Width="56px" BackColor="Silver" />
</asp:Panel>

<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender2" runat="server" TargetControlID="pnlCountry"
Radius="8" Corners="All" />

As u might have noticed I have applied border style= groove to the panel name pnlCountry. After that I have used the RoundedCornersExtender to round the corner of the panel. However, the effect is that the panel has the rounded corner but because of the border it seems that corners are still pointed as it is the panel that gets the rounded corners not the border of the panel. So the effect is there but it is not visible. Plz help.

Thanks & Regards,

Geevika

Hi Geevika,

Would you please explain more clearly? I have tested your sample and it seems that the border , which is groove ,is not displayed well. If it is your problem, I think it's CSS issue. My suggestion is using a <div> element show the border instead of your Panel control.

Best Regards,

Jonathan

Country Name

Hi Jonathan,

I think I was unable to explain my point clearly. The code that i sent to you gives the above result however, this above displayed output did not include Ajax rounded corner control. As you can see the border is clearly visible and border style is groove. Now whenever I apply the ajax rounded corner control, the border remain as it is(pointed corners) but the panel body(inner light gray part) gets the rounded corners. So the effect of rounded corner control is there but that is not clearly visible as the border did not get the rounded corners. What I m trying to do is that the panel border should also get the rounded corners so that the effect should be clearly visible.

Thanks & Regards,

Geevika

Hi Geevika,

As far as I know, I'm afraid that we cannot achieve this by setting any property directly.I have nested a RoundedCornersExtender but find that it is difficult to control its diplay position.So I think the best way is using <div> element.

Best Regards,

Jonathan

rounded corner extender not working consistantly

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

<asp:PanelID="PanelTop"runat="server"BackColor="AliceBlue"Height="50px"Width="800px">

<strong><spanstyle="font-size: 16pt; color: #1e90ff">KSM Information Systems --

PC Inventory <br/>

<tablewidth="800">

<tr>

<tdstyle="width: 831px; height: 18px; text-align: center;"valign="top">

<spanstyle="font-size: 16pt; color: dodgerblue">

<asp:ButtonID="Button2"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/AddMultiplePCs2.aspx"Text="Enter New PC's"/></span></td>

</tr>

</table>

<br/>

</span></strong>

</asp:Panel>

<br/>

<asp:PanelID="PanelMain"runat="server"BackColor="AliceBlue"Height="12px"Width="797px">

te

<asp:ButtonID="BtnViewALLpcs"runat="server"BackColor="#507CD1"Font-Bold="True"

ForeColor="White"PostBackUrl="~/ViewAllPcs2.aspx"Text="View All PC's"BorderStyle="None"/>st<br/>

<br/>

</asp:Panel>

<br/>

<asp:PanelID="PanelMain2"runat="server"Height="50px"Width="796px"BackColor="AliceBlue">

<strong><spanstyle="font-size: 16pt; color: #1e90ff">KSM Information Systems --

PC Inventory <br/><tablewidth="800">

<tr>

<tdstyle="width: 831px; height: 18px; text-align: center;"valign="top">

<spanstyle="font-size: 16pt; color: dodgerblue">

<asp:ButtonID="Button3"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/AddMultiplePCs2.aspx"Text="Enter New PC's"/></span></td>

</tr>

</table><asp:ButtonID="Button1"runat="server"BackColor="#507CD1"Font-Bold="True"ForeColor="White"

PostBackUrl="~/Checkout2.aspx"Text="Checkout a PC"/></asp:Panel>

<br/>

<br/>

<br/>

<br/>

<br/>

<asp:contentplaceholderid="ContentPlaceHolder1"runat="server">

</asp:contentplaceholder>

<divstyle="font-family: 'Arial Unicode MS'; font-size: 12pt;">

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

</div>

<cc1:roundedcornersextenderid="RoundedCornersExtender1"runat="server"corners="Bottom"

targetcontrolid="PanelTop"BorderColor="224, 224, 224"Radius="10"></cc1:roundedcornersextender>

<cc1:DropShadowExtenderID="DropShadowExtender1"runat="server"Radius="10"TargetControlID="BtnViewALLpcs"Opacity="6"Rounded="True">

</cc1:DropShadowExtender>

<cc1:roundedcornersextenderID="RoundedCornersExtender2"runat="server"BorderColor="224, 224, 224"Radius="10"TargetControlID="PanelMain"Corners="Bottom">

</cc1:roundedcornersextender>

<cc1:roundedcornersextenderID="RoundedCornersExtender3"runat="server"BorderColor="224, 224, 224"

Corners="Bottom"Radius="10"TargetControlID="PanelMain2">

</cc1:roundedcornersextender>

</form>

Please provide more details...What is the inconsistent behavior?

Rounded Corner Extender has problems with dynamic panels

I'm trying to create some panels, which are "glued" to the top and bottom, so the panel resize together with browser. It works fine, until I attach a Rounded Corner Extender. Then the rounded corners are positioned correct with the top, but the height are fixed somewhere near the top.

Here are the panel I try to add rounded corners to:

<asp:PanelID="PanelSideBar"runat="server"Style="position: absolute; top: 100px;left: 10px; bottom: 25px; width: 200px"BackColor="Beige"></asp:Panel>

<

ajaxToolkit:RoundedCornersExtenderID="RCExtender"runat="server"TargetControlID="PanelSideBar"></ajaxToolkit:RoundedCornersExtender>Thanks for reporting this. I have opened work itemhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8769 for this.

Rounded Corner Extender - loses background colour

I've just moved from 'Atlas' to the Ajax 1.0, and have overcome most of the problems that threw up, except for one. My rounded corner extender is losing the background colour of the panel it is acting on and replaces it with the colour from the page background image. Anyone else come across this and knows how I can fix it?

Cheers,

Sam

I'm having the same problem.
I noticed that defining the style elements in the panel-style attribute, solves the problem, but it's not what i want.

Here an example of the problem and a possible fix. Anyone else with a better solution?

<%

@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<

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

<

headrunat="server"><title>Untitled Page</title><style>.cssPanel

{

width:720px;background:#fffafa;

}

</style>

</

head>

<

bodystyle="background-color: gray; padding: 10 10 10 10px;"><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/><ajaxToolkit:RoundedCornersExtenderID="rce1"runat="server"TargetControlID="panel1"Radius="6"/><asp:PanelID="panel1"CssClass="cssPanel"runat="server">

Panel1

</asp:Panel><br/><ajaxToolkit:RoundedCornersExtenderID="rce2"runat="server"TargetControlID="panel2"Radius="6"/><asp:PanelID="panel2"style="background:#fffafa;width: 720px;"runat="server">

Panel2

</asp:Panel></form>

</

body>

</

html>

Rounded corner divs

Is it possible to use the RoundedCornerExtender on divs? I got it to work on my panel, but for some reason my panels don't take the CSS class I assign them to.

Thanks!

Yes, asp:Panel just maps to DIV in HTML anyway.

Rounded corners

Ive noticed that when i use the rounded corners on a panel, it only works on the panel,

if i put a border on the panel, it only rounds the inside of the panel, and not the border.

Am i doing something wrong, or is this just not possible?

RoundedCorners currently does not support borders although we're working on some enhancements to add support for a 1px border as well as being able to choose which corners to round.

Rounded Corners & CSS Margin

I am using the rounded corners control on a panel control. I have the margin of the panel defined with CSS. This causes a gap the size of the margin setting between the panel and the Rounded Corner effect. Am I doing something wrong or is this a bug with the extender?

That's the way the control works unfortunately. If you look at the docs it tells you that it adds to the height of the of the control it is extending to achieve the rounding effect which makes fairly worthless for anything that requires headers for example...

Hopefully MS can figure out a better way to do this in the future, but being an extender I'm not sure that there really is a better way to do this since the control has to work with an existing control and its size parameters.

+++ Rick --

--
Rick Strahl
West Wind Technologies
www.west-wind.com
www.west-wind.com/weblog

<JasonRCS> wrote in messagenews:1287524@.forums.asp.net...

I am using the rounded corners control on a panel control. I have the margin of the panel defined with CSS. This causes a gap the size of the margin setting between the panel and the Rounded Corner effect. Am I doing something wrong or is this a bug with the extender?

---

http://forums.asp.net/thread/1287524.aspx

This ends up being a mutually exclusive situation unfortuntely. If someone has an idea for a solution I amall ears.

The only way I know of doing the rounded corners without custom bitmaps is to add elements to the control. Let's call them adornments.

So, you can either add the elements outside of the control you're targeting or inside.

If you add them outside it falls down quickly. If you have any positioning set on the thing you are targeting (relative or absolute), then the adornments get left behind. So that's a major problem.

If you add them inside the control (which is what we do), it generally works better, but there are combinations of styles that we can't handle, margin being one of them.

In most cases you can accomplish what you need to by composition - meaning if you wrap another div/panel around the outside of your object and apply the rounded cornders to that one or vice-versa you can make it do what you want.

Thank you both for your comments. I just wanted to make sure that isthe way it is supposed to work. I will get by with using an embeddeddiv for now.

I am not aJavaScript person, but would it be possible for the control tomodifythe border property of the element? This would allow the modificationto be reside between the padding and margin attributes of an element. Just throwing ideas out there. I know the Mozilla browsers support a proprietary attibute of moz-radius to do this with borders.

Thank you agian for your help!

Jason

JavaScript
java script
java-script
conscript
Edit...
Ignore all
Add to dictionary

modify
mortify
motif
codify
modding
Edit...
Ignore all
Add to dictionary

Sorry for the extra junk at the bottom... Google Spell Check gone bad!

The modifications are just a bunch of added DIVs, so they can't live in that zone unfortunately.

If the embedded DIV trick works for you, stick with that.

Same problem here - although I have previously managed to set up CSS only rounded corners which do not suffer from this problem, so I'm going to compare and contrast with the extender, to see if I can fix it up.

Should you happen to want a work-around in the meantime, e.g. my example, where I wanted "margin-top: 10px" on a div with rounded corners (so that there was a blank space between two divs which are one above the other), you can wrap an extra div around your panel-with-rounded-corners, and put the margin on that (extra) div - leaving the rounded corners as is.

Cheers,

Matt

rounded corners - how hard can it be?

I thought I'd use the AJAX toolkit just to add some nice round corners to a panel. How hard can that be? I'm only using it because it looks so damn easy. Only it won't work - no friggin corners. I got so frustrated, I copied the code directly from the sample website and pasted it onto my page. Still doesn't work! Here's the HTML:

 <ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" TargetControlID="ContentPanel" BehaviorID="RoundedCornersBehavior1" Radius="6" Color="255, 224, 192" /> <asp:Panel runat="server" ID="ContentPanel" Width="350px" Height="400px" CssClass="newscontent"> <h2>Click a news item to view</h2> </asp:Panel>

Nothing. Anyone had this? I should mention perhaps it's in a master page context. I really can't imagine what else could be a factor. I even tried implementing it from the design view - which I hardly ever use - and everything looked hunky dory. Adding the color line gives me a rounded corner top edge in that color. The rest is white.

I think that the problem is withnewscontent css style. Can you post it here?

kipo:

I think that the problem is withnewscontent css style. Can you post it here?

I thought of that too. Alas, the only thing left in the CSS is this:

.newscontent {float:right; margin-left:5px;}

Crazy huh? So far I have to say I have had lots of problems with these wonderful-looking controls.

OK, here is working example:http://rapidshare.com/files/54867245/RoundedCorners.zip.html
Download it and try to run on your machine. If it works ok than there is something wrong in your code (most likely in web.config file), but if it doesn't work than I suppose you will need to reinstall AJAX.

Rounded Corners - Colors for top and bottom?

I am trying to use rounded corners control, and its working fine, but I need to see if its possible to have the top of the control a differant color than the bottom?

is there a way to tell each corner to be a differant color? How about the bottom corners to be a smaller/larger size than the top?

Any advice would be helpful

Thanks

-Shane

You'd need to modify the implementation of RoundedCorners to get either of these features. If you do so and others find the changes desirable, we'd be happy to integrate them into the Toolkit!

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 Extender and Background Images

First off, I love the control toolkit!

Is there a way (or will there be a way) to add background-image support to the rounded corners extender. Sometimes I would like to set the background to do a gradient or other lightweight background image, but I can't seem to make any of that work with rounded corners.

Thanks!

It is a nice feature but it is not supported. The RoundedCornersExtender will pick up the color of the target element and build rounded divs around it using that.

Thanks!

That would be a great feature for a future release. I still love the product.

Keith

Thanks!

That would be a great feature for a future release. I still love the product.

Keith

Thanks,

That would be a great feature for a future release. At any rate, the existing control is great.

Keith

I agree, this would be a useful feature. It could be done by specifying an optional control parameter to set the background colour of the control to transparent - NiftyCube (http://www.html.it/articoli/niftycube/index.html) does something similar and I am currently using this in prefernce to the RoundedCornersExtender. Very easy to impliment.

rounded corners extender

I'm trying to make my datagrid have rounded corners using the ajax rounded corners extender. When I load my page the datagrid apears and then disappears right away. In view source I see the datagrid information. Has anyone else had this problem, if so how did you fix it?

Thanks.

Does the datagrid have data in it? Datagrids disappear if empty.

Does the datagrid have data in it? Datagrids disappear if empty.

View source shows there is data in the grid. It appears then in a second disappears.

Thanks for the reply. I would really like this to work, it would make my page look so much better as everything else on the page has rounded corners.

Hi,

It's hard to tell why exactly without knowing how you implement it.

Can you show me a simple repro? It will be preferred if you can modify it a little bit to use Northwind database.

rounded corners control problem

Hi, I have tried this code:

<%@dotnet.itags.org. Page Language="C#" %>
<SCRIPT runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Image i = new Image();
Panel pl = new Panel();
PlaceHolder1.Controls.Add(pl);
pl.Controls.Add(i); pl.BorderColor = System.Drawing.Color.Blue;
pl.BackColor = System.Drawing.Color.Blue;
pl.ID = "pnl";
i.ID = "pppp";
i.ImageUrl = "../images/1/1.jpg";
i.Height = 200;
i.Width = 200;
pl.Height = 200;
pl.Width = 200;
AjaxControlToolkit.RoundedCornersExtender rce = new AjaxControlToolkit.RoundedCornersExtender();
PlaceHolder1.Controls.Add(rce);
rce.ID = "bleble";
rce.TargetControlID = pl.ID;
rce.Radius = 6;
}
</SCRIPT>
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD id=Head1 runat="server">
</head>
<body>
<FORM id=form1 runat="server">
<DIV>
<?xml:namespace prefix = asp /><asp:ScriptManager id=ScriptManager1 runat="server">
</asp:ScriptManager>
<asp:PlaceHolder id=PlaceHolder1 runat="server"></asp:PlaceHolder>
</DIV>
</FORM>
</body>
</html>

For some reasons the result I got is the image inside a panel, with two blue thin rounded corners rectangles on the top of the image and on the bottom of it.
It didn't make rounded corner image. What is the problem of it? How can I display rounded corners image?

Why dont you try to create the conrol in the front end instead of the code behind.

use the following code that is on the sample and see it works fine. All you have to do is give the Id of the control!

http://www.asp.net/ajax/control-toolkit/live/RoundedCorners/RoundedCorners.aspx

I write my application in a way that for each aspx file there is aspx.cs file. I tried this 100 times and it didn't worked for me. Take the code I wrote and try it yourself. Does it show a rounded corner Image? For some reason, Images are not working for RoundedCornersExtender.

I am looking desperatly for an answer.

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

Rounded corners and Div tags? Possible?

Hey folks.. I watched the video's on Ajax and I love it.. My question is this: I noticed that the author used a Panel to make rounded corners.. Can I use a Layer / Div tag and color the background and round a corner ? That way I don't have any images included or an extra control? Just thought I'd ask.. I would like to use it like you see in table cells with a header that is an image that has rounded corners and info inside the control..

Thanks

Tim

hi,

yes you can have a TargetControl as div markup, just don't forget to add a runat="server" on that div tag..

hth

http://www.webmasterworld.com/forum83/7447.htm

Thank you, but someone needs to write MS or the w3c people or whoever makes the standards for HTML and CSS and say "Hey".. There's a need for this.. It would seem to me that we should be able to make a control that we could just use?

Tim

I started writing a control for this. I've got a little bit of code cleanup to do, but you can see a screenshot of it here:

http://Beta.GuitarVoice.com

And you can download a copy of it here:

http://www.MJ-Consulting.biz/MjControls/MjRoundedDiv/MjRoundedDiv.zip

After you install, you'll have to add the control to your toolbox by browsing to the dll. Like I said, it's not perfect, but is a start. I'm curious to know what you think of it.

Oh, and you'll have to copy the MjControls directory to your site as well (contains images).

rounded corners + borders?

Is there a way to get rounded corners and borders to work together? When I apply both the rounding goes away, apparently.

Hi miky,

I don't think the two play nicely together. RoundedCornersworks by building up a stepped sequence of very thin divs on the edge of your control, which doesn't really make sense if you're using a border as well. I'd recommend setting theColor andRadiusproperties ofRoundedCornersto achieve a border-like effect.

Thanks,
Ted

Thanks, Ted, for the response. Those details are good to know. I'll play around with your suggestion and report what I find.

Rounded Corners in Firefox

Hello everyone,

I have tested the SampleWebSite and seen that the RoundedCorners component works fine under Firefox.

The problem is, when I do my own tests, it doesn't. The site is perfect under IE but terrible under firefox. I don't know if I may be doing something wrong.

The rounded corners panel seem to be with a fixed height, and the text inside the panel goes out of the border. I'm using the latest build of the toolkit and I am totally uncomfortable with it, because everything I do is perfect under IE and terrible under Firefox.

Here goes my panel's code:

 <asp:Panel ID="pnlAcademico" runat="server" Height="50px" Width="98%"> <table style="width: 95%; text-align: justify;" border="0"> <tr> <td> <asp:Label ID="lblCurso" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" Text="Nome do curso: "></asp:Label> </td> <td> <asp:TextBox ID="tbxNomeCurso" runat="server" BorderStyle="None" Width="90%" MaxLength="50"></asp:TextBox> <asp:DropDownList ID="ddlCursos" runat="server" Width="91%" DataTextField="Descricao" DataValueField="Codigo" Visible="False"> </asp:DropDownList> </td> </tr> <tr> <td style="height: 26px"> <asp:Label ID="Label26" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" Text="Institui??o de ensino:"></asp:Label> </td> <td> <asp:TextBox ID="tbxInstituicao" runat="server" BorderStyle="None" Width="90%" MaxLength="70"></asp:TextBox> </td> </tr> <tr> <td style="height: 26px"> <asp:Label ID="Label27" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" Text="Carga horária:"></asp:Label></td> <td> <asp:TextBox ID="tbxCargaHoraria" runat="server" BorderStyle="None" Width="33px" MaxLength="4"></asp:TextBox>  </td> </tr> <tr> <td style="height: 21px"> <asp:Label ID="Label29" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small" Text="Data de conclus?o: "></asp:Label> </td> <td> <asp:TextBox ID="tbxDataConclusao" runat="server" BorderStyle="None" Width="65px"></asp:TextBox>  <cc1:MaskedEditExtender ID="mkeDataConclusao" runat="server" ClearMaskOnLostFocus="False" Mask="99/99/9999" TargetControlID="tbxDataConclusao" Enabled="True" CultureName="pt-BR" CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder="R$ " CultureDateFormat="DMY" CultureDatePlaceholder="/" CultureDecimalPlaceholder="," CultureThousandsPlaceholder="." CultureTimePlaceholder=":"> </cc1:MaskedEditExtender> </td> </tr> </table> <table style="width: 95%; text-align: justify;" border="0"> <tr> <td style="height: 21px">   </td> <td style="text-align: right;"> <asp:Button ID="btnAdicionarAcademico" runat="server" Text="Adicionar" OnClick="btnAdicionarAcademico_Click" /> </td> </tr> </table> <br /> <asp:GridView ID="gdvAcademico" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical" Width="90%" AutoGenerateColumns="False" OnRowDataBound="gdvAcademico_RowDataBound"> <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" /> <FooterStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="Gainsboro" /> <RowStyle BackColor="#EEEEEE" ForeColor="Black" /> <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /> <Columns> <asp:BoundField DataField="TipoCurso" HeaderText="Tipo" /> <asp:BoundField DataField="Curso" HeaderText="Curso/área do conhecimento" /> <asp:BoundField DataField="InstituicaoEnsino" HeaderText="Institui??o" /> <asp:BoundField DataField="DataConclusao" HeaderText="Data de conclus?o" DataFormatString="{0: dd/MM/yyyy}" HtmlEncode="False" /> </Columns> </asp:GridView> </asp:Panel> <cc1:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server" BehaviorID="RoundedCornersBehavior3" BorderColor="Gray" Radius="6" TargetControlID="pnlAcademico" Enabled="True"> </cc1:RoundedCornersExtender>

I got 5 or 6 of these in the same page, and I get some of the panels visible or invisible according to my needs.

Is there anything wrong in the way I'm putting myRoundedCornersExtender to work?

It was supposed to work under FF, right?

Thanks in advance.

Forget it. I fixed it.

It's not a rounded corners issue, but an asp:panel issue.

All I had to do was remove the "height" from the asp:panel.

Thanks anyways.

Rounded Corners Fetaure Suggestion

Hey guys/girls/people,

The controls are great - I have a feature suggestion for the Rounded corners...

TopVisible - Boolean - show/hide the top div

BottomVisible - Boolean - show/hide the bottom div

TopText - String - Text to be shown in the top rounded div

TopCssClass - String - cssclass to be used to style the top text

This would allow you to create sidebar panels like they use in the community server...

http://communityserver.org/Default.aspx

Cheers!!

Andrew

Hey!,

This is a great idea, i have the same feature, specially the TopText String Property...

Bye!, Moisés.

rouf:

Hey!,

This is a great idea, i have the same feature, specially the TopText String Property...

Bye!, Moisés.

Have another question... Why when I use a Atlas Update Panel near a Rounder Corners Extender the corners split in various lines?, something like this :
______
__________
_______________

Sorry for my eng...

This is a good idea. Could you please file a feature request at

http://www.codeplex.com/WorkItem/List.aspx?ProjectName=AtlasControlToolkit

Thanks!

This bug is already fixed

rounded corners with firefox and opera

I am using some rounded corner controls on an app im testing. In IE they work perfectly but in firefox and opera the borders are broken. The rounded part shows but it detached from the vertical borders. Has anyone else had this happen? HOw do you fix it?I wrote some testing codes to check Ajax:RoundedCornersExtenderand found it worked fine in IE7,FireFox and Opera.I installed Visual Studio 2005 with Ajax Beta 2 and Futures November CTP in my PC.Here are my testing?codes?for?your?
reference.
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>
<div>
<asp:Panel ID="pnlRoundedCorner" runat="server" BackColor="LimeGreen">
<table>
<tr><td id="RoundedCorner">Rounded Corner Rectangle:<asp:TextBox ID="TBRoundedCorner" runat="server"></asp:TextBox></td></tr>
</table>
</asp:Panel>
<Ajax:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="pnlRoundedCorner" Radius="60"></Ajax:RoundedCornersExtender>
</div>
AjaxEnabled website web.config:
<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="Microsoft.Web.Configuration.ScriptingSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="webServices" type="Microsoft.Web.Configuration.ScriptingWebServicesSectionGroup, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="Microsoft.Web.Configuration.ScriptingJsonSerializationSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
<section name="profileService" type="Microsoft.Web.Configuration.ScriptingProfileServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
<section name="authenticationService" type="Microsoft.Web.Configuration.ScriptingAuthenticationServiceSection, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
<connectionStrings>
<add name="AspForumsConnection" connectionString="Data Source=.;Initial Catalog=Performancing;UID=sa;PWD=Infy_1001"
providerName="System.Data.SqlClient" />
<add name="ProductConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Product.mdf;Integrated Security=True;User Instance=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagPrefix="asp" namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
<tagMapping>
<add tagType="System.Web.UI.WebControls.CompareValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CompareValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.CustomValidator" mappedTagType="Microsoft.Web.UI.Compatibility.CustomValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RangeValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RangeValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RegularExpressionValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.RequiredFieldValidator" mappedTagType="Microsoft.Web.UI.Compatibility.RequiredFieldValidator, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagType="System.Web.UI.WebControls.ValidationSummary" mappedTagType="Microsoft.Web.UI.Compatibility.ValidationSummary, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</tagMapping>
</pages>
<!--
Set compilation debug="true" to insert debugging
symbols into the compiled page. Because this
affects performance, set this value to true only
during development.
-->
<compilation debug="true">
<assemblies>
<add assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>
</httpHandlers>
<httpModules>
<add name="WebResourceCompression" type="Microsoft.Web.Handlers.WebResourceCompressionModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptModule" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="MagicAjax" type="MagicAjax.MagicAjaxModule, MagicAjax" />
</httpModules>
<!--<sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" timeout="1" cookieName="PHPSESS_ID@.PLANETRE" cookieless="UseCookies"/>-->
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="Microsoft.Web.UI.ScriptModule, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-ISAPI-2.0"/>
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler"/>
</handlers>
</system.webServer>
</configuration>
Besides,try to set "Fit to Width" in Opera,otherwise maybe you will get the inorder web controls in a web page.
Can you post some codes here?Let me try to test it and check what's the result.
Wish the above can help you.