Version

Modify the Resize Handle

A customization request that your end users may ask from you is to change the style of the resize handle that appears in the lower-right corner of the resizing control. The resize handle is controlled by Cascading Style Sheets (CSS). Therefore the easiest way to modify the resize handle is to create a CSS class in your form, and then assign the class name to the HandleClass property of WebResizingExtender™. This topic will show you how to create an in-line CSS class, and then assign it to the HandleClass property.

  1. To create a CSS class, inside your page’s <head> tags, after the closing <title> tags, create a <style> tag of type "text/css".

  2. Assign the class a name by inserting '.' followed by the name you want to assign to the class.

  3. Open the class by typing a '{' character. Close the class by typing a '}' character.

  4. Close your <style> tag.

  5. With that done, youcan now makethe style changes that you want. The resize handle follows and understands all standard CSS. So you can change the border, the background, set an image to appear, etc. The following example code sets the border, background, width, and height of the resize handle.

In CSS:

<style type="text/css">
	.hand0
	{
		border:1px solid red;
		background:orange;
		width:14px;
		height:14px;
	}
</style>
  1. To use the CSS class, select the WebResizingExtender control on the design surface.In the Properties window, set the HandleClass property, to a value of "hand0". This is the name given to the CSS class we created.

  2. Build and run the Web form. You will see that the resize handle is now a little orange square with a red outline.