The Autosize Feature of the Built-in Dialogs is Enabled
As of Q3 2013, the size of RadEditor dialogs is calculated via the Autosize feature of the RadWindow controls.
Since the Q3 2013 release, you can no longer set a custom size for the built-in dialogs using the DialogDefinitions class. For more information, see the "How to set a custom size for a dialog" section below.
Why Is This Change Necessary?
Telerik is changing how RadEditor dialogs resize for several reasons:
- More consistent layout across the major browsers
- Correct behavior and layout when different skins are being used
- Improvement in the usability of the dialogs
- Fixes, related to cross-browser issues.
How to Set a Custom Size for a Built-in Dialog
Programmatic approach
The example below shows how to resize the RadEditor's ImageProperties, SetLinkProperties and LinkManager dialogs:
<script>
function OnClientCommandExecuting(editor, args) {
if (editor.get_dialogOpener()) {
var commandName = args.get_commandName();
console.log(commandName)
if (editor.get_dialogOpener()._getDialogContainer) {
dialogReference = editor.get_dialogOpener()._getDialogContainer(commandName);
setTimeout(function () {
if (commandName == "SetImageProperties") {
editor.get_dialogOpener()._getDialogContainer("ImageProperties").set_height("600px");
editor.get_dialogOpener()._getDialogContainer("ImageProperties").set_width("550px");
}
else if (commandName == "SetLinkProperties" || commandName == "LinkManager") {
editor.get_dialogOpener()._getDialogContainer("LinkManager").set_height("600px");
editor.get_dialogOpener()._getDialogContainer("LinkManager").set_width("550px");
}
}, 2000);
}
}
}
</script>
<telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs" OnClientCommandExecuting="OnClientCommandExecuting">
<Content>
<a href="https://google.com">Google</a>
<img src="Images/woolly-mc.png" />
<br />
</Content>
</telerik:RadEditor>
Alternative approach
You can set a custom size for a built-in dialog using additional CSS rules in their UserControl files. You should have already used the ExternalDialogsPath property to customize a built-in dialog. If you are not familiar with this approach, please examine the "ExternalDialogsPath property" article and the "Editor - Customize Built-in Dialogs" demo.
After following the steps provided in the Customize Built-in Dialogs demo you should implement the CSS rule. First add a <style> tag in the UC file. This rule should affect the body element of the document. Use a selector with higher CSS specificity than the default one and set the desired width and height attributes. For example, to resize the Document Manager you could use the following rule:
html.redDocumentManager body
{
width: 580px;
height: 832px;
}
You should use the correct class name according to the dialog’s name. For convenience, you could follow this pattern:
html.red<DialogName> body
If you are using MetroTouch or BlackMetroTouch skin, you should use the following rule:
html.red<DialogName>.RadForm_<SkinName> body
You can also define the CSS rules in a separate file and point the DialogsCssFile property of the RadEditor control to it.With this approach, you will not be forced to manipulate the UC files and you can easily modify the sizes of the dialogs.You can find more information about this property in the "DialogsCssFile Property" article.