[Solved] Custom Dialog Sizing Error

[Jordan]

Hi,

I'm trying to create a custom dialog for the AJAX version of the Editor control.

When I click my toolbar button, the dialog opens - unfortunately it opens wildly out of control. Typically it is much wider than desired, extending off screen. When I mouse over it, usually (although not always) it will shrink down to the size I want:

http://img122.imageshack.us/img122/747/telerik1jg6.jpg
http://img386.imageshack.us/img386/7857/telerik2mh5.jpg

Here's the gist of the relevant code:

<telerik:RadEditor ID="RadEditor1" Runat="server"
        DialogHandlerUrl="Telerik.Web.UI.DialogHandler.aspx"
        EditModes="All"
        Width="680px"
        Height="400px"
        Language="en-US"
        Skin="Default2006"
        StripFormattingOnPaste="None"
        StripFormattingOptions="None"
        ToolbarMode="Default" >       
        <Content>
        </Content>
        <SpellCheckSettings SpellCheckProvider="PhoneticProvider" WordIgnoreOptions="None"></SpellCheckSettings>
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="UploadDocument" />
                <telerik:EditorTool Name="UploadImage" />
                <telerik:EditorTool Name="ImanageLink" />
                <telerik:EditorTool Name="Bold" />
            </telerik:EditorToolGroup>
        </Tools>       
    </telerik:RadEditor>
   
    <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["UploadDocument"] = function(commandName, editor, args)
        {
            var zoneID = '<%= Request["zoneID"] %>';
       
            var UploadDocument_Callback = function(sender, args)
            {
                if(args.href != "" || args.text != "")
                    editor.pasteHtml(String.format("<a href={0}>{1}</a>", args.href, args.text));               
            }
           
            editor.showDialog("UploadDocument", zoneID, UploadDocument_Callback);
        };
</script>




 DialogDefinition uploadDocument_DialogDefinition = new DialogDefinition("./Controls/UploadDocument.ascx", new DialogParameters());
            uploadDocument_DialogDefinition.Modal = true;
            uploadDocument_DialogDefinition.VisibleTitlebar = true;
            uploadDocument_DialogDefinition.VisibleStatusbar = true;           
            uploadDocument_DialogDefinition.Width = Unit.Pixel(428);
            uploadDocument_DialogDefinition.Height = Unit.Pixel(440);
RadEditor1.AddDialogDefinition("UploadDocument", uploadDocument_DialogDefinition);




ASCX Code:

<script type="text/javascript">
    function getRadWindow() //mandatory for the RadWindow dialogs functionality
    {
        if (window.radWindow)
        {
            return window.radWindow;
        }
        if (window.frameElement && window.frameElement.radWindow)
        {
            return window.frameElement.radWindow;
        }
        return null;
    }

    function initDialog() //called when the dialog is initialized
    {
        var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
    }
   
    if (window.attachEvent)
    {
        window.attachEvent("onload", initDialog);
    }
    else if (window.addEventListener)
    {
        window.addEventListener("load", initDialog, false);
    }

    function insertLink() //fires when the Insert Link button is clicked
    {
        //create an object and set some custom properties to it
        var closeArgument = {};
        var linkContainer = document.getElementById("linkContainer");
        closeArgument.href = linkContainer.options[linkContainer.selectedIndex].value;
        closeArgument.text = linkContainer.options[linkContainer.selectedIndex].text;

        getRadWindow().close(closeArgument); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
    }
</script>


<div style="width: 390px; height: 405px; background-color: #EEEEEE; font-family: Verdana, Arial; font-size: 8px;">
    <table style="width: 100%; height: 100%;">
        <tr>
            <td style="text-align: center; vertical-align: top; height: 100%;">
                <fieldset style="width: 375px; height: 200px; text-align: left;">
                    <legend style="font-weight: bold;">Choose Attachment</legend>
                    <br />
                    &nbsp;<asp:ListBox runat="server" ID="lbAttachments" Width="350px" Rows="7"></asp:ListBox>
                    <div style="width: 355px; text-align: right;">
                        <asp:Button runat="server" ID="btnAttach" Text="Attach" BackColor="#D1D1D1"
                            ForeColor="#3333AA" onclick="btnAttach_Click" />
                        <asp:Button runat="server" ID="btnDelete" Text="Delete" BackColor="#D1D1D1"
                            ForeColor="#3333AA" OnClientClick="if(confirm('Delete this File?') == false) { return false; }" onclick="btnDelete_Click" />
                        <asp:Button runat="server" ID="btnCancel" Text="Cancel" BackColor="#D1D1D1"
                            ForeColor="#3333AA" onclick="btnCancel_Click" />
                    </div>
                </fieldset>
                <br />
                <h4>
                    - OR -</h4>
                <fieldset style="width: 355px; height: 120px; text-align: left; padding-left: 10px;">
                    <legend style="font-weight: bold;">Upload New Attachment</legend>
                    <br />
                    <span style="width: 50px; position: relative; top: -4px;">Title:</span>
                    <asp:TextBox runat="server" ID="txtTitle" Width="289px"></asp:TextBox>
                    <br />
                    <br />
                    <span style="width: 50px; position: relative; top: -4px;">File:</span>
                    <asp:FileUpload runat="server" ID="fileUpload1" Width="216px" /> &nbsp;
                    <asp:Button runat="server" ID="btnUpload" Text="Upload" BackColor="#D1D1D1"
                        ForeColor="#3333AA" Height="22px" onclick="btnUpload_Click" />
                </fieldset>
            </td>
        </tr>
    </table>
</div>

[Lini]

Hello,

I can see that in the ascx code you have a table with width and height set to 100% and only a single cell inside. If you do not need the table for any special reason, try removing it from the code and leave only the <div> wrapper around your HTML.

Also, try removing the window status bar (uploadDocument_DialogDefinition.VisibleStatusbar = false;). The long window URL in the status bar might be responsible for the extra width.

Best wishes,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jordan]

Thank you Lini, this solved the problem for me. It was the status bar that was the main culprit.

- Jordan