2012年3月21日水曜日

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.

0 件のコメント:

コメントを投稿