Using a validator callout extender with FCKEditor does not set "left" style

Question

As it says in the title, I'm doing custom validation with FCK (because the RequiredFieldValidator doesn't work with FCKEditor). When validation fails, the callout appears, but it does not show up in the correctposition.

Generated style tag: visibility: visible; position: absolute; left: 0px; top: 646px; z-index: 1000;

Not that left is coming as 0px. (The top isn't quite right either, but it's close enough for now)

Here's my markup:

<FCKeditorV2:FCKeditor ID="FCKeditorBody" runat="server" Width="600" Height="150" ToolbarSet="Basic"></FCKeditorV2:FCKeditor>
<asp:CustomValidator runat="server" ID="cvBody" ControlToValidate="FCKeditorBody" SetFocusOnError="true" 
    ErrorMessage="Please enter a body." ClientValidationFunction="ValidateBody" ValidateEmptyText="true" 
    ValidationGroup="ValgrpPost" Display="None" />
<asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7" BehaviorID="vceBID" TargetControlID="cvBody"
        HighlightCssClass="ValidatorCalloutHighlightCSS" CssClass="RecipeCalloutCSS" PopupPosition="TopLeft" />

<script type="Text/javascript">
    function ValidateBody(source, args) {
        var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
        args.IsValid = fckBody.GetXHTML(true) != "";
    }
</script>

Answer 1

Make sure you put an element with position:relative around the FCKeditor and the validator, then it will show at the top left of the FCKeditor.

<div style="position:relative">
    <FCKeditorV2:FCKeditor ... />
    <asp:CustomValidator ... />
    <asp:ValidatorCalloutExtender ... />

    <script type="text/javascript">
        function ValidateBody(source, args) {
            var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
            args.IsValid = fckBody.GetXHTML(true) != "";
        }
    </script>
</div>

The message will now cover the toolbar and block the buttons untill you press the "x". A backgroundcolor should be added to the message to make it better visible.

If you wanted to show it inside the textarea of the editor, maybe PopupPosition="BottomRight" is better for that. Or you could overrule the generated css with an !important rule.

 .RecipeCalloutCSS{ left:0!important; top:65px!important; }