This is a migrated thread and some comments may be shown as answers.

[Solved] Docking EditorTools Background

2 Answers 105 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Guillaume asked on 20 Feb 2013, 01:55 PM

EditorToolWithCorrectBackground.png

EditorToolIncorrectBackground.png

Hi,

We've been using Telerik Ajax Asp.net version 2010 for a while.
We upgraded to 2012 a few days ago and we are facing an issue whit the Editor Tool Group associated to our radEditor.
The background of the docked editor buttons seems to have diseapear as you can see on the attached file.

I give you the code used to create this UserControl :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucIndiceTextBox.ascx.cs"

Inherits="RBCVTransCVN.UserControls.ucIndiceTextBox" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">

#<%= indiceTextBox.ClientID %>_contentDiv

{

min-height: 29px !important;

overflow: hidden;

}

.reContentCell

{

border-style: none !important;

}

</style>

<div style="float: left; margin-right: 3px;">

<telerik:RadEditor ID="indiceTextBox" runat="server" EditModes="Design" EnableResize="False"

onpaste="fnTrimPaste(event)" Width="200px"

Height="29px" StripFormattingOptions="AllExceptNewLines">

</telerik:RadEditor>

</div>

<div id="rightDock" style="float: left; width: 56px; height: 27px;" runat="server">

</div>

protected void Page_Init(object sender, EventArgs e)

{

toolgroup = new EditorToolGroup();

toolgroup.Attributes["DockingZone"] = rightDock.ClientID;

indiceTextBox.Tools.Add(toolgroup);

toolgroup.Tools.Add(new EditorTool("Superscript"));

toolgroup.Tools.Add(new EditorTool("Subscript"));

toolgroup.Attributes["ShowIcon"] = "True";

toolgroup.Attributes["ShowText"] = "False";

}

Is there any way to make those buttons to back as they were before ?

Thanks,

Guillaume

2 Answers, 1 is accepted

Accepted

answered on 20 Feb 2013, 04:00 PM

Hello,

Since Q3, 2012 we have implemented SASS to generate our CSS files and during that improvement, we provided some improvements for the CSS where it was possible. RadEditor's CSS was hardly restructured and it is possible for some custom solution not to work anymore.

The good thing is that in your case there is a really simple solution. You should put the name of the Skin with which you are using RadEditor to the rightDock div:

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="float: left; margin-right: 3px;">

<telerik:RadEditor ID="indiceTextBox" runat="server" EditModes="Design" EnableResize="False"

onpaste="fnTrimPaste(event)" Width="200px"

Height="29px" StripFormattingOptions="AllExceptNewLines">

</telerik:RadEditor>

</div>

<div id="rightDock" style="float: left; width: 56px; height: 27px;" runat="server" class="Default">

</div>

</form>

</body>

As your example does not use any specific Skin value for RadEditor it uses the Default skin, so i put class="Default", marked in yellow in the rightDock div. if you use Forest skin, it should be:

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="float: left; margin-right: 3px;">

<telerik:RadEditor ID="indiceTextBox" runat="server" EditModes="Design" EnableResize="False"

onpaste="fnTrimPaste(event)" Width="200px"

Height="29px" StripFormattingOptions="AllExceptNewLines" Skin="Forest">

</telerik:RadEditor>

</div>

<div id="rightDock" style="float: left; width: 56px; height: 27px;" runat="server" class="Forest">

</div>

</form>

</body>

Kind regards,
Bozhidar
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.