Mar 9, 2010

11:47 PM - No comments

Apply css for CallOut Validator

AjaxToolkit:ValidatorCalloutExtender provides CssClass property to help you make your own style to display popup.
For example:


<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="vceCUSIP" TargetControlID="reqCUSIP"
HighlightCssClass="validatorCalloutHighlight" CssClass="CustomValidatorCUSIP" PopupPosition="Left" />

But you not only re-defined css class CustomValidatorCUSIP but also re-defined all items in this style sheet. Another word, you must overwrite default style provides by ajaxToolkit:


<style id = "CUSIPStyle" type="text/css">

.CustomValidatorCUSIP
{
position: relative;
margin-left: 0px;
margin-top: 0px;
display: inherit;
}
.CustomValidatorCUSIP div
{
border: solid 1px Black;
position: relative; /*boder arrow
border: solid 1px red; */
background-color: #fcfdd8;
}
.CustomValidatorCUSIP td
{
border: solid 1px Black;
background-color: #fcfdd8;
}
.CustomValidatorCUSIP .ajax__validatorcallout_popup_table
{
display: none;
border: none;
background-color: transparent;
padding: 0px; /*
border: solid 1px red; */
}
.CustomValidatorCUSIP .ajax__validatorcallout_popup_table_row
{
vertical-align: top;
height: 100%;
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_cell
{
width: 20px;
height: 100%;
text-align: right;
vertical-align: top;
border: none;
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_table
{
height: 100%;
border: none;
background-color: transparent;
padding: 0px; /*chứa arrow
border: solid 1px green;
*/
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_table_row
{
background-color: transparent;
padding: 0px;
}
.CustomValidatorCUSIP .ajax__validatorcallout_callout_arrow_cell
{
padding: 8px 0px 0px 0px;
text-align: right;
vertical-align: top;
font-size: 1px;
border: none;
background-color: transparent;
}
.CustomValidatorCUSIP .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;
}
.CustomValidatorCUSIP .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; /*
border: solid 2px #3a6ea5;
*/
}
.CustomValidatorCUSIP .ajax__validatorcallout_error_message_cell
{
font-family: Verdana;
font-size: 10px;
padding: 5px;
border-right: none;
border-left: none;
width: 100%;
}
.CustomValidatorCUSIP .ajax__validatorcallout_icon_cell
{
width: 20px;
padding: 5px;
border-right: none;
}
.CustomValidatorCUSIP .ajax__validatorcallout_close_button_cell
{
vertical-align: top;
padding: 0px;
text-align: right;
border-left: none;
}
.CustomValidatorCUSIP .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
{
border: none;
text-align: center;
width: 10px;
padding: 2px;
cursor: pointer;
}
</style>

0 comments:

Post a Comment