The Imaginative Universal

Studies in Virtual Phenomenology -- @jamesashley

Styling the Validator Callout Extender

September 04
by James Ashley 4. September 2008 02:13

The Validator Callout Extender is one of the controls included in the Ajax Control Toolkit.  It allows one to replace the normal appearance of an asp.net validation control with an attractive cutout.  For instance:

This is a required field.

A common problem concerns how to restyle the callout to give it a custom appearance.  The documentation for this control makes it clear that the default CSS class may be overridden in order to change the appearance of the callout. The Callout Extender has a CssClass property which may be set to a custom style.  Unfortunately, the documentation also includes an apparent error.  According to the documentation for the Validation Callout Extender:

If your CssClass does not provide values for any of those then it falls back to the default value.

This turns out not to be true.  Instead, one must override all the nested classes of the Callout Extender in order to get a reasonably good looking callout.  If any of the nested classes are not overridden, once a value has been assigned to the CssClass property, no style is applied to the nested style.

Consequently, in order to do something as simple as setting the back-color of the callout to Blue, the custom style will end up looking like this:

    <style type="text/css">
        .customCalloutStyle div, .customCalloutStyle td
        {
            border: solid 1px Black;
            background-color: Blue;
        }
        .customCalloutStyle .ajax__validatorcallout_popup_table
        {
            display: none;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_popup_table_row
        {
            vertical-align: top;
            height: 100%;
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_cell
        {
            width: 20px;
            height: 100%;
            text-align: right;
            vertical-align: top;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_table
        {
            height: 100%;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_table_row
        {
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell
        {
            padding: 8px 0px 0px 0px;
            text-align: right;
            vertical-align: top;
            font-size: 1px;
            border: none;
            background-color: transparent;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
        {
            font-size: 1px;
            position: relative;
            left: 1px;
            border-bottom: none;
            border-right: none;
            border-left: none;
            width: 15px;
            background-color: transparent;
            padding: 0px;
        }
        .customCalloutStyle .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
        {
            height: 1px;
            overflow: hidden;
            border-top: none;
            border-bottom: none;
            border-right: none;
            padding: 0px;
            margin-left: auto;
        }
        .customCalloutStyle .ajax__validatorcallout_error_message_cell
        {
            font-family: Verdana;
            font-size: 10px;
            padding: 5px;
            border-right: none;
            border-left: none;
            width: 100%;
        }
        .customCalloutStyle .ajax__validatorcallout_icon_cell
        {
            width: 20px;
            padding: 5px;
            border-right: none;
        }
        .customCalloutStyle .ajax__validatorcallout_close_button_cell
        {
            vertical-align: top;
            padding: 0px;
            text-align: right;
            border-left: none;
        }
        .customCalloutStyle .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
        {
            border: none;
            text-align: center;
            width: 10px;
            padding: 2px;
            cursor: pointer;
        }
    </style>

This will give you the following change in appearance:

This is a required field.

In order to play with the nested classes in order to customize the look of the callout, it would be useful to know what the HTML for the Validator Callout actually looks like.  Unfortunately, the callout is generated using client script, making it impossible to simply peek at the source in order to figure out what the markup looks like.  After about an hour of reading through the behavior class for the Callout Extender, I was finally able to come up with this:

        <table id="_popupTable" cellpadding="0" cellspacing="0" border="0" class="customCalloutStyle">
            <tbody>
                <tr class="ajax__validatorcallout_popup_table_row">
                    <td class="ajax__validatorcallout_callout_cell">
                        <table width="200px" cellpadding="0" cellspacing="0" border="0" 
                            class="ajax__validatorcallout_callout_table">
                            <tbody>
                                <tr class="ajax__validatorcallout_callout_table_row">
                                    <td class="ajax__validatorcallout_callout_arrow_cell">
                                        <div class="ajax__validatorcallout_innerdiv">
                                            <div style="width: 14px">
                                            </div>
                                            <div style="width: 13px">
                                            </div>
                                            <div style="width: 12px">
                                            </div>
                                            <div style="width: 11px">
                                            </div>
                                            <div style="width: 10px">
                                            </div>
                                            <div style="width: 9px">
                                            </div>
                                            <div style="width: 8px">
                                            </div>
                                            <div style="width: 7px">
                                            </div>
                                            <div style="width: 6px">
                                            </div>
                                            <div style="width: 5px">
                                            </div>
                                            <div style="width: 4px">
                                            </div>
                                            <div style="width: 3px">
                                            </div>
                                            <div style="width: 2px">
                                            </div>
                                            <div style="width: 1px">
                                            </div>
                                        </div>
                                    </td>
                                    <td class="ajax__validatorcallout_icon_cell">
                                        <img alt="" border="0" src="alert-large.gif" />
                                    </td>
                                    <td class="ajax__validatorcallout_error_message_cell">
                                        This is a required field.
                                    </td>
                                    <td class="ajax__validatorcallout_close_button_cell">
                                        <div class="ajax__validatorcallout_innerdiv">
                                            <img alt="" border="0" src="close.gif" />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
 

This probably isn't completely correct, but it's pretty close.  If you want to try to write your own custom style for the Validator Callout Extender, just copy the markup above, as well as the CSS class above that, into your favorite WYSIWYG editor and have at it.  At a minimum, you should be able to customize the colors either to match your site design (the default background color is Chiffon Yellow, after all), or to indicate different sorts of validation errors.

One question I've seen on the ASP.NET Forums concerns whether it is possible to switch the arrow that flies off the left side of the callout to the right.  Unfortunately, the arrow is actually coded into the HTML generated by the Validator Callout, and is not controlled by CSS styles.  It would be nice to see this as a feature of future releases of the Ajax Control Toolkit.

Tags: ,

.Net | Ajax

Comments

9/16/2008 8:21:06 PM #

Josh Stodola

OMG that is the fugliest chunk of markup I have ever seen!

Josh Stodola

10/16/2009 3:41:01 PM #

Mike Griehm

Good work on this, it was frustrating me and your explanation and css code was perfet, thanks.

Mike Griehm

9/25/2010 4:02:42 PM #

Tommy Newcomb VerifyHistory.com

Thank you very much for this article.  What a pain it has been to modify these controls.  But they are still really really cool tools.  Just wish the documentation was better.  You rock.

Tommy Newcomb VerifyHistory.com United States

9/25/2010 4:03:03 PM #

Tommy Newcomb

Thank you very much for this article.  What a pain it has been to modify these controls.  But they are still really really cool tools.  Just wish the documentation was better.  You rock.

Tommy Newcomb United States

9/25/2010 4:03:41 PM #

Tommy Newcomb

Thank you very much for this article.  What a pain it has been to modify these controls.  But they are still really really cool tools.  Just wish the documentation was better.  You rock.

Tommy Newcomb United States

9/25/2010 5:36:21 PM #

jashley@imaginativeuniversal.com

Josh,

Yes it is!  I changed blogging software and themes a while back and never went back to check if the code still displays correctly.  Sorry about that.

jashley@imaginativeuniversal.com United States

1/3/2011 7:12:42 AM #

test

Test

test India

3/7/2011 4:10:31 AM #

true religion jeans

Yes it is!  I changed blogging software and true religion jeans themes a while back and never went back to check if the code still displays correctly.  Sorry about that.

true religion jeans People's Republic of China

6/9/2011 7:55:08 AM #

as seen on tv

Pretty Absorbing accumulation. Couldnt be typewritten any improved. Measuring this position reminds me of my old shack beast! He e'er kept talking almost this. I testament presumptuous this move to him. Pretty trustworthy he present jazz a redemptive see. Thanks for intercourse!

as seen on tv United States

6/9/2011 7:56:52 AM #

Moving Service  New York City

Hello. Enthusiastic job. I did not expect this on a Weekday. This is a beatific story. Thanks!

Moving Service New York City United States

6/9/2011 7:59:48 AM #

utah search engine optimization

I would equal to add your blog to my blogroll satisfy swan me what anchor should I use?

utah search engine optimization United States

6/23/2011 5:26:52 AM #

Pandora Bracelets

Really like the newest look. I enjoyed this write-up. Thanks for the excellent work.

Pandora Bracelets United States

6/23/2011 5:27:49 AM #

Pandora Charms

Hello, nice day.. Your article is quite uplifting. I never believed that it was feasible to accomplish something like that until after I looked over your post.

Pandora Charms United States

6/23/2011 5:28:28 AM #

Christian Louboutin Shoes

This is a fantastic guide you have more to publish these kinds of content articles since so dumb, I observed the response to my question. I wish you continued results in creating.

Christian Louboutin Shoes United States

6/23/2011 5:29:11 AM #

Christian Louboutin

Nice photos. Reminds me when i was in college. Youthful urban setting getting about in the city. Bicycle is the way.

Christian Louboutin United States

6/23/2011 5:29:47 AM #

louboutin

nice post really informative and useful love your site looking forward for more

louboutin United States

7/1/2011 10:05:05 PM #

cheap wedding dresses

There is also a good idea; all your emails in case of discrepancies save. <a href="http://www.love-dresses.com/"><b> cheap wedding dresses 2011</b></a>  Send your measurements correct! This step is so important! Therefore, do well! The best way of doing things -? Has a professional seamstress to do for you. Do not do it yourself. If you can not find a seamstress and a friend do it for you. A <a href="http://www.love-dresses.com/"><b> wedding dresses </b></a> Most companies do not allow returns or refunds on custom wedding gowns. And if measures are not taken correctly, your dress does not fit properly. You can change, if <a href="http://www.love-dresses.com/"><b> cheap wedding gowns </b></a> does not fit, but why not like a good glove for the first time. The changes can be costly and the aim is here to save! beach wedding dresses 8. Will there be a high quality garment? Some Chinese companies are showing pictures of wedding dresses, they can do, but my experience, not always say exactly look like the picture I had to learn this way the hard drive! Be very careful when they say the <a href="http://www.love-dresses.com/"><b> inexpensive wedding dresses </b></a> at the same time, 90% as the picture. Thats 10% is not correct, is the part that “Dream Wedding” an image in a “junk shop find” in the foreign exchange market. “We agree that” No fun! A Line Princess Strapless Chapel Train Taffeta wedding dressTherefore, make sure the company has a good reputation and you can feel safe with them..The dress flows fluidly from the bust towards the hem with an unbroken line. on account of its traditional and uncomplicated style, the A-line dress is suitable for just about any occasion, from the <a href="www.love-dresses.com/"><b>cheap wedding dresses</b></a> backyard gathering, to a conventional church ceremony.  most likely get a better price if you want. Price negotiations is one of the things I do not like life in China, but if you do well to learn to your advantage in a situation like this to work. Fashionable Wedding Dress Looks Unique Mode wedding is a series of changes. Fashion is influenced as brides for their wedding dresses. Fashionable wedding dresses created a line to the needs of modern brides who want to meet to create a unique style statement in its membership the day of the <a href="http://www.zhouer.net/">nike air force 1 2011</a> .<a href="http://www.zhouer.net/">nike air force 1</a>   are similar to the Dub Zero and Spizike, is another pair of combination footwear from the Air Jordan Shoes series. The Six Rings characteristics components from each of the <a href="http://www.zhouer.net/">air force one shoes</a> that Michael Jordan used to win his 6 NBA Championship Rings: heel loop and also lace locks from Jordan 6,gucci on sale, Huarache design sock liner from . fluffy tongue logo,gucci boots, VELCRO straps and Phylon Zoom Air from J 8(VIII); silhouette of top and patent leather-based midsole through Air Jordan 11; TWO 3 stitched down the tongue and also steel wide lace loops from Air Jordan 12; Jumpman logo at the end of tongue close to the toe such as.

cheap wedding dresses People's Republic of China

7/2/2011 4:18:10 AM #

Nike Air Jordan Shoes 2011

Wedding for her appeared to be being a affliction with bondage, mum to be some time troubled plus suffering, plus alone plus subjection, the woman appeared to be so that you can have fun with a factor on the dependent upon individual's resources for anyone the girl's fabric prefers, plus for your information and facts the woman could drive... This can be the Word of god posture with women in short , summed right up.

Nike Air Jordan Shoes 2011 U.A.E.

7/19/2011 10:31:56 PM #

P90x Workout

Nice Post. It’s really a very good article. I noticed all your important points. Thanks
<a href="http://www.p90xworkoutus.com">P90x Workout</a>
<a href="http://www.p90xworkoutus.com">P90x Dvd</a>

P90x Workout United States

12/18/2011 5:04:25 AM #

trackback

Implementing validation callout in Asp.net MVC (with data annotations)

Implementing validation callout in Asp.net MVC (with data annotations)

BlueLemonCode.Com

12/28/2011 5:43:54 AM #

pingback

Pingback from mindbirdsolutions.com

Teck Trip » Implementing validation callout in Asp.net MVC (with data annotations)

mindbirdsolutions.com

9/9/2014 10:08:57 AM #

pingback

Pingback from aspforum.thekollectable.com

[RESOLVED]ValidatorCalloutExtender displays in wrong GridView row | Asp Forum

aspforum.thekollectable.com

Comments are closed