Tools image on RadEditor not Displaying

[Jeanne Quitoriano]

Hi,

I'm new here and I wish to ask help from you guys regarding my problem.

We upgraded our copy of the telerik version from 2009 to 2010 and changed our application's skin to Default. Every thing's looking good. We decided to create a custom skin and registered it on our application. Every thing went well with the custom skin except for the RadEditor and DateTimePicker. The said controls were in the RadGrid's EditItemTemplate.

We set the property EnabledEmbeddedSkin to false. And then the images on the rad editor's tools were not displayed. The buttons for the date time picker didn't display either. And also, the checkboxlist in the radgrid didn't appear either.

Please help? See the attached screenshot.


Thank you!

Regards,
Jeanne

[Rumen]

Hi Jeanne,

Here are our suggestions on resolving the problem:

1) Do you experience this problem in Internet Explorer only? If it exists only in IE, it is most likely due to that you are loading more than 31 css files. You can find information about this problem in this blog post: Internet Explorer CSS limits.
The solution for this browser limitation is to manually combine the different Telerik control skin files in one or several CSS files in which you link the removed CSS files one by one using @import declarations.

2) The second reason for the problem is that the URL that should point to the /Common/CommandSpritesLight.png toolbar sprite image of RadEditor is wrong. You can check the path in FireBug and correct it until the image is loaded. You can find more information about RadEditor custom skins in this article: Creating Custom Skin for RadEditor.

You should also check whether the Common skin folder contains the CommandSpritesLight.png, /Common/CommandSpritesDark.png, CommandSpritesLight.gif and CommandSpritesDark.gif files.

3) If you unable to solve the problem, please provide a live URL to the problematic page, so that we can examine it on our end with Firebug and IE developer toolbar and provide a solution.

Another approach is to open a support ticket and send a sample working project along with your custom skin that demonstrates the problem.

Sincerely yours,
Rumen
the Telerik team

[Jeanne Quitoriano]

Hi!

Thanks for the reply.

We resolved the problem.

Thanks!

[Waseem]

 Radeditor icons are missing in Internet explorer. But when i show full RadEditor. it is showing correctly.

<telerik:RadEditor ID="txtEditor1" runat="server" ToolbarMode="Default" BorderStyle="None" EditModes="Design" BorderWidth="0" BorderColor="Transparent"
                                                     Height="190" Width="575">
                                                      <Tools>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="Bold" />
                                                            <telerik:EditorTool Name="Italic" />
                                                            <telerik:EditorTool Name="Underline" />
                                                            <telerik:EditorTool Name="ForeColor" />
                                                            <telerik:EditorTool Name="InsertSymbol" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="InsertUnorderedList" />
                                                            <telerik:EditorTool Name="InsertOrderedList" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="Outdent" />
                                                            <telerik:EditorTool Name="Indent" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="JustifyLeft" />
                                                            <telerik:EditorTool Name="JustifyCenter" />
                                                            <telerik:EditorTool Name="JustifyRight" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorTool Name="LinkManager" />
                                                        </telerik:EditorToolGroup>
                                                        <telerik:EditorToolGroup>
                                                            <telerik:EditorToolStrip Name="InsertTable" />
                                                        </telerik:EditorToolGroup>
                                                    </Tools>
                                                    <Content>
                                                    </Content>
                                                                                                
                                                </telerik:RadEditor>


Thanks,
Muhammad Waseem
The Telerik Team

[Waseem]

Forget attachment.

[Waseem]

For custom tools, use this css for missing icons.

.reToolbar span
{
    position: absolute !important;
    padding: 0px !important;
}

.reWrapper_corner, .reWrapper_center, .reLeftVerticalSide, .reRightVerticalSide
{
    line-height: 0px !important;
    font-size: 0px !important;
}

.reToolCell
{
    background-color:White !important;
    border: none !important;
}

.reTlbVertical
{
    background-color: White !important;
    border: none !important;
}

.reToolbar li
{
    background-image: none !important;
}

.Default .reTool .split_arrow
{
    margin: 0px 0px 0px 23px !important;
}

Thanks,
Muhammad Waseem
The Telerik Team