RadEditor.ImageEditor CSS issue.

2 posts, 0 answers
  1. 9971404
    9971404 avatar
    4 posts
    Member since:
    Oct 2016

    Posted 29 Dec 2016 Link to this post

    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:EditorToolGroup Tag="FileManagers">
                <telerik:EditorTool Name="ImageManager"></telerik:EditorTool>
                <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                <telerik:EditorTool Name="TemplateManager"></telerik:EditorTool>
                <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                <telerik:EditorTool Name="ForeColor"></telerik:EditorTool>
                <telerik:EditorTool Name="BackColor"></telerik:EditorTool>
                <telerik:EditorTool Name="FontName"></telerik:EditorTool>
                <telerik:EditorTool Name="RealFontSize"></telerik:EditorTool>

  2. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 03 Jan 2017 Link to this post


    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.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top