RadEditor.ImageEditor CSS issue.

[9971404]

Hi, I have implemented a custom FileBrowserContentProvider for Azure and customized the file bowser by following the steps on the “Editor - Customize Built-in Dialogs” article (http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx).

Everything is working well but the image editor is not rendered properly (check the attached files).

<telerik:RadEditor
    ID="RadEditor1"
    RenderMode="Classic"
    LocalizationPath="~/App_GlobalResources/Controls_Editor"
    ContentFilters="MakeUrlsAbsolute"
    DocumentManager-MaxUploadFileSize="11000000"
    OnFileUpload="RadEditor1_FileUpload"
    OnFileDelete="RadEditor1_FileDelete"
    ExternalDialogsPath="~/Controls/TelerikEditorDialogs/"
    runat="server">
    <Tools>
        <telerik:EditorToolGroup Tag="FileManagers">
            <telerik:EditorTool Name="ImageManager"></telerik:EditorTool>
            <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
            <telerik:EditorTool Name="TemplateManager"></telerik:EditorTool>
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold"></telerik:EditorTool>
            <telerik:EditorTool Name="Italic"></telerik:EditorTool>
            <telerik:EditorTool Name="Underline"></telerik:EditorTool>
            <telerik:EditorSeparator></telerik:EditorSeparator>
            <telerik:EditorTool Name="ForeColor"></telerik:EditorTool>
            <telerik:EditorTool Name="BackColor"></telerik:EditorTool>
            <telerik:EditorSeparator></telerik:EditorSeparator>
            <telerik:EditorTool Name="FontName"></telerik:EditorTool>
            <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

[Bozhidar]

Hi,

I checked the attached images and the ImageEditor is rendered properly, but as you have some longer labels they break the layout in both shown dialogs - in the main dialog they wrap to the next line and the result is that the dialog height is not enough.

In the other Dialog - the ImageEditor options - the long labes do not wrap to the next line, but push the next item to the tight and that way increase the width, which break the layout.

You have several options:

- Make labels shorter so they will fit the Dialog dimensions and not break the layout.
- Inspect with firebug/devtoolbar the label elements and with some CSS prevent them to break the layout

For the main Dialog it will be similar to:

.reLightweightDialog.RadForm_Silk .redWrapper .redLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 107px;
}

A similar approach can be used for the other dialog also.

Attached is an image showing the result with the CSS above applied to the dialog label.

Note that the width specified of 107px can be different for different skins. In my example I used the Silk skin.

Regards,
Bozhidar
Telerik by Progress