Hi All, I'm using the HTMLEditorExtender and ValidatorCalloutExtender. The ValidatorCalloutExtender works well with regular text boxes, but when I try to use it with the HTMLEditorExtender it pops up at the top of the page. I'm using custom CSS and I'm able to do everthing accept move it down to the HTMLEditorExtender box.
Here is my code:
<div class="subtitle" align="center">
Description <br /><br />
<asp:TextBox ID="txtDescription" Width="400px" Height="200px" CssClass="form-td" runat="server"
TextMode="SingleLine" />
<asp:RequiredFieldValidator ID="rfvDescription" runat="server" ErrorMessage="Description is Required"
CssClass="error" Font-Bold="True" Font-Size="10pt" ControlToValidate="txtDescription"
Display="None" EnableViewState="False"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="VCE4" runat="server" CssClass="CustomValidator3"
CloseImageUrl="images/close.png" TargetControlID="rfvDescription" />
<asp:HtmlEditorExtender ID="HTMLEditorExtender" runat="server"
TargetControlID="txtDescription" EnableSanitization="False">
<toolbar>
<asp:Undo />
<asp:Redo />
<asp:Bold />
<asp:Italic />
<asp:Underline />
<asp:StrikeThrough />
<asp:Subscript />
<asp:Superscript />
<asp:JustifyLeft />
<asp:JustifyCenter />
<asp:JustifyRight />
<asp:JustifyFull />
<asp:InsertOrderedList />
<asp:InsertUnorderedList />
<asp:CreateLink />
<asp:UnLink />
<asp:RemoveFormat />
<asp:SelectAll />
<asp:UnSelect />
<asp:Delete />
<asp:Cut />
<asp:Copy />
<asp:Paste />
<asp:BackgroundColorSelector />
<asp:ForeColorSelector />
<asp:FontNameSelector />
<asp:FontSizeSelector />
<asp:Indent />
<asp:Outdent />
<asp:InsertImage />
<asp:InsertHorizontalRule />
<asp:HorizontalSeparator />
</toolbar>
</asp:HtmlEditorExtender>
</div>
CSS:
.CustomValidator3 {
margin-left:-3px; width:250px; margin:50px;
}
.CustomValidator3 div {
border:solid 1px Black; background-color:#ffffff;
}
.CustomValidator3 td {
border:solid 1px Black; background-color:#ffffff;
}
.CustomValidator3 .ajax__validatorcallout_popup_table {
display:none; border:none; background-color:transparent; padding:5px;
}
.CustomValidator3 .ajax__validatorcallout_popup_table_row {
vertical-align:top; height:50px; background-color:transparent; padding:50px;
}
.CustomValidator3 .ajax__validatorcallout_callout_cell {
width:20px; height:50px; text-align:left; vertical-align:top; border:none; background-color:transparent; padding:0px;
}
.CustomValidator3 .ajax__validatorcallout_callout_table {
height:50px; border:none; background-color:transparent; padding:0px;
}
.CustomValidator3 .ajax__validatorcallout_callout_table_row {
background-color:transparent; padding:0px;
}
.CustomValidator3 .ajax__validatorcallout_callout_arrow_cell {
padding:8px 0px 0px 0px; text-align:left; vertical-align:top; font-size:1px; border:none; background-color:transparent;
}
.CustomValidator3 .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {
font-size:5px; position:relative; left:1px; border-bottom:none; border-right:none; border-left:none;
width:15px; background-color:transparent; padding:0px;
}
.CustomValidator3 .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;
}
.CustomValidator3 .ajax__validatorcallout_error_message_cell {
font-family:Verdana; font-size:10px; color:#333333; padding:10px; border-right:none; border-left:none;
}
.CustomValidator3 .ajax__validatorcallout_icon_cell {
width:20px; padding:5px; border-right:none;
}
.CustomValidator3 .ajax__validatorcallout_close_button_cell {
vertical-align:top; padding:3px; text-align:left; border-left:none;
}
.CustomValidator3 .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {
border:none; text-align:left; width:10px; padding:2px; cursor:pointer;
}