Resizable control as part of composite control

I'd like to use the ASP.NET AJAX Resizable control in my composite control. My control should provide all its images, JavaScript, and CSS as Embedded Resources, so that the users of it don't need to bother about these files. This includes the HandleGrip.png image that comes with the Resizable control. Unfortunately, the image use is defined in the css of the Resizable control, like this:

.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}

How can I let anyone use my control without giving them a copy of HandleGrip.png (to put somewhere on their website, while it is already embedded in my DLL)?

Hi,

You may refer to the the sample in AjaxControlToolkit. For instance:

.ajax__slider_h_rail {position:relative;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_rail.gif")%>) repeat-x;height:22px;}

Indeed.

I triedbackground-image. Visual Studio did not let me (saying'url(<%=WebResource(' is not a valid value for the 'background-image' property.). After I read your comment I realized I could set the background-image by means of specifyingbackground.

Thanks.

rjs:PopCalendar CSS Problem

i use rjs calendar in my EditItemTemplate in Grid view without Atlas. This works fine but when i use atlas in my page then rjs Calender in EditItemTemplate CSS and image are not include.

If i use atlas in rjs calendar in my page rather than EditItemTemplate then it work fine. More ever if i use this rjs PopCalendar in EditItemTemplate and include this in another portion of the page rather then EditItemTemplate then rjs PopCalendar in EditItemTemplate also works fine.

I think if a page has only one rjs PopCalendar and we use this in EditItemTemplate of Grid View then CSS and image are not load.

Can any one help me.

Thanks in advance

The issue is that the client side script for components (like dhmtl popup calendars and in my case a custom textbox that formats its contents onblur) call Page.ClientScript.RegisterClientScriptBlock in their initialization. These controls are set up to only register the script once regardless of how many of the controls you have on the page. So when you drop one of these client-enabled controls on the page outside of the update panel the script will be registered as usual with no problems. If they are embedded in a template like the edit item template the control won't be created until postback and because you are doing a partial page update the call to Page.ClientScript.RegisterClientScriptBlock is failing to register the required scripting components. If you open the Error Console in firefox you'll see the javascript failing...

A quick fix is to drop an instance of the control you want to use outside the update panel and hide it...on page load the script will be registered and the control should function as usual. This is a hack and I'm currently searching (this forum and the web) for a better solution...I definitely don't want to include javascript via script tags in the markup...kinda defeats the purpose of encapsulating the script in the source for the control...

~JDS

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 & 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

RoundedCornersExtender and Gradient Background

Please take a look at this screenshot:

It's just a Panel (ie. div) with its CSS pointing to a gradient background. Without the RoundedCornersExtender it looks as it should but with it one gets that annoying dark edge at the top. The same problem appears in Firefox 2.0 and IE7.

How can I fix this?

Robert W.

Just a guess here, but it looks like the top dark section is probably an image -- the bottom image inverted.