RoundedCornersExtender bug

<

ajaxToolkit:RoundedCornersExtenderID="rce"runat="server"TargetControlID="Panel1"Radius="6"Corners="Top"/>

Hi i was trying to use this rounded corner object on this panel below

<

asp:PanelID="Panel1"runat="server"Width="325px"BackColor="white"Height="0px"Wrap="false"HorizontalAlign="Center"></asp:Panel>well i noticed it adds 6 on both sides i just need 6 on the top not at the bottom. so the objects gets bigger then wanted. i just want the top portion to extend not the bottom. I understand if people dynamicly change the roundness like the example but i dont want that extra portion to show up at all. any way to do this thanks.

Hi,

The Panel you try to extend needs to have a minimun height (15px out of my mind). I think is not documented, but I found it just by experience.

It sounds logical to me, because, if I remember correctly, the corners are calculated using your setting and the size of the control to be extended.

Cheers,

Juan

Sorry, just to correct myself:

The extra height you get is the sum of: Extender Radius + Panel Height. If the height is less than the font-size (or any other block element contained into the panel) and you haven't set the display value of the panel as "inline" (by default would be block) you have to add it to the sum instead of the height.

You didnt understand what im saying look at the code below

<DIV class="roundedPanel" id="ctl00_SampleContent_Panel1" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: top; WIDTH: 330px; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; className: "><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 6px; OVERFLOW: hidden; MARGIN-RIGHT: 6px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 3px; OVERFLOW: hidden; MARGIN-RIGHT: 3px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 2px; OVERFLOW: hidden; MARGIN-RIGHT: 2px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV class="roundedPanel" id="ctl00_SampleContent_Panel1" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none"><DIV style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; TEXT-ALIGN: center"><DIV style="BORDER-RIGHT: black thin solid; PADDING-RIGHT: 5px; BORDER-TOP: black thin solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: black thin solid; PADDING-TOP: 5px; BORDER-BOTTOM: black thin solid; BACKGROUND-COLOR: #b4b4b4"><IMG id="ctl00_SampleContent_Image1" style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" alt="ASP.NET AJAX" src="http://ajax.asp.net/ajaxtoolkit/images/AJAX.gif" /><BR />ASP.NET AJAX </DIV></DIV></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV><DIV style="FONT-SIZE: 1px; MARGIN-LEFT: 0px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; HEIGHT: 1px; BACKGROUND-COLOR: #5377a9" __roundedDiv></DIV></DIV></DIV></DIV></DIV></DIV>

this is copied from the roundedcorner example from the web. if you look at the div's, the one in the center is the one that has the data. and the ones before and after are the rounded corner builders. look at the margin left values they change from 0 to 6 on the top which gives the curve and the ones at the buttom dont have that, which is what i want . BUT i dont want the buttom ones at all. My object is basicly touching the following object its looks like they are one peace when these empty divs gets in the way and causes the object not to show as one. if that make sense.

basicly if i can say to the roundedcorner object to show only on the top and dont draw the bottom that would the trick but there is no setting for that and the obj dont get an id so i cant hide them after getting the code build.

drewex,

Yes, maybe I misunderstood your question, but you weren't very clear asking it.
You want the "bottom divs" not to be rendered, am I right? Well, the subject of the thread was "RoundedCornersExtender bug", and I was looking for them when thinking about your question. What you are asking for is not a bug fix, is a change in the expected functionality.

Those extra divs are generated by the javascript function that modifies the DOM after the HTML code is served to accomplish the objective of the extender, which is, according to the samples:

"The RoundedCorners extender applies rounded corners to existing elements. To accomplish this it inserts elements before and after the element that is selected, so the overall height of the element will change slightly. You can choose the corners of the target panel that should be rounded by setting the Corners property on the extender to None, TopLeft, TopRight, BottomRight, BottomLeft, Top, Right, Bottom, Left, or All."

Anyway, as you cannot override the Render method of the control to tweak this, and, as you said, you don't have and id or class to customize, I can't see a feasible way to achieve what you want, except to write you own control inheriting a Panel and adding extra divs wherever you want using the new control's Render event.

Regards,

Juan

drewex,

Have you tried experimenting with a wrapper DIV that has a fixed height of TargetControlID.Height+rounded radius and overflow:hidden? I'm thinking this would let RoundedCorners add to both sides, but because of the fixed height of the container, the bottom rounds wouldn't be visible.

I realized its something im never going to change so i create 4 radious rounded corner then went to the html copied the divs pasted in to my code and removed the existing rounded corner. There i go i got the rounded corner i needed only change i did was to add the initial width and id's runat server. then changing the width was easy just had to do it 5 times instead 1 but who cares. :):):)thanks for trying to help i was just suggesting it would be nice to be able to have the option to remove the extra stuff if i wanted it.

RoundedCornersExtender issue....Horizontal Lines

Is anyone having issues with the RoundedConersExtender showing up as horzontal lines on top and bottom of the control? I have a single RCE on a page that has 4 controls attached to it and 2 of them render correctly and the other 2 appear to be stretched out displaying as lines. Also on the login screen using the login control I have the same issue. The login control is with in an update panel. If authentication fails a message is displayed with in the login control but then the horizontal lines appear on top and botton of the panel. The RCE does render correctly when initially loaded though. Any ideas?

Thanks,

Michael

If this is IE-only, then it's due to what seems like an IE rendering bug. I'd thought I'd fixed this at one point, but I see it's back due to a global change we made recently to access styles properly. However, that breaks the IE workaround. I've fixed this again, I think. Trydevelopment release 5412 or later, please. Or change your RoundedCornersBehavior.js to have the bold lines (and recompile, etc.):

if (e.style.height) {
// Increase the height to account for the rounded corners
e.style.height = parseInt(CommonToolkitScripts.getCurrentStyle(e, 'height')) + (_radius * 2) + "px";
} 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";
}
}

Thanks, I will give it a try!

Michael

The problem has been cured!!!

Thanks,
Michael

I have the similar problem and the bold lines you mentioned is already in place.

Any idea?

Goto thewww.CodePlex.com link in David's post and download the the latest version of the source code . Recompile and replace the appropriate dll's in the you bin folder. Not sure when the next CTP is going to be released, but downloading and recompiling fixed the issue on my end.

Michael

Hi,

We just released the lastest version 60914 on 9/15 onCodePlex.

Thanks,
Ted