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

[Solved] RadEditor with no borders?

4 Answers 409 Views

Editor

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

Joshua Deye asked on 09 Sep 2010, 02:41 PM

editors.JPG

Is it possible to have a Rad Editor with no borders? I've tried using the css from the article to display an Editor as a textbox, but I still get a top and bottom border for the editor. I'm trying to use several editors on one page and create a custom display so they look like one, allowing me to save the text in particular chunks rather than as a whole.

Here is the code I am using and attached is an image of the result.

<style type="text/css">

.reWrapper_corner, .reWrapper_center

{

display: none !important;

}

.reLeftVerticalSide,

.reRightVerticalSide,

.reToolZone,

.reToolCell

{

background: white !important;

}

.reContentCell

{

border-width: 0 !important;

}

.reWrapper

{

border: 0 !important;

}

.RadEditor

{

filter: chroma(color=c2dcf0);

}

.rade_toolbar.WebBlue .ShowHistory

{

background-image: url(Images/history.png);

}

</style>

<telerik:RadEditor ID="txtEditor1" runat="server" EditModes="Design" ToolbarMode="PageTop" ToolsFile="~/NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true" ContentAreaMode="Div" BorderStyle="None"telerik:RadEditor>

<telerik:RadEditor ID="txtEditor2" runat="server" EditModes="Design" ToolbarMode="PageTop" ToolsFile="~/NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true" ContentAreaMode="Div" BorderStyle="None" ></telerik:RadEditor>

4 Answers, 1 is accepted

answered on 14 Sep 2010, 05:19 PM

noborders.jpg

Hello Joshua,

I have tested your code with some small changes and it works fine form my side - I do not see any border: find attached noborders.jpg to see the result in the browser.

I want also to ask you, what version of the controls you are using as .rade_toolbar.WebBlue we do not use such a class in the current Editor version.

Please, find the code that I am using to test the issue:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.reWrapper_corner, .reWrapper_center

{

display: none !important;

}

.reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell

{

background: white !important;

}

.reContentCell

{

border-width: 0 !important;

}

.reWrapper

{

border: 0 !important;

}

.RadEditor

{

filter: chroma(color=c2dcf0);

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadEditor ID="txtEditor2" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None">

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None">

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor2" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None">

</telerik:RadEditor>

</form>

</body>

</html>

Please, lets us know if this solution is suitable for you, and if it is not, send us an image to show what result you want exactly to achieve be meaining "Editor with no borders".

Kind regards,
Bojo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 15 Sep 2010, 01:20 PM

nobordersattempt.JPG

We're using the ASP.NET Ajax Q2 2010 controls, version 2010.2.713.35. I'm using IE 7 for the browser.

I'd love to get exactly what your image shows, an editor with no borders. But when I use the same code you have supplied, I get the attached image as a result. It has a top and bottom 1px border.

Here is the code I use:

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

.reWrapper_corner, .reWrapper_center

{

display: none !important;

}

.reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell

{

background: white !important;

}

.reContentCell

{

border-width: 0 !important;

}

.reWrapper

{

border: 0 !important;

}

.RadEditor

{

filter: chroma(color=c2dcf0);

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadEditor ID="txtEditor2" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 1</Content>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 2</Content>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor2" runat="server" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 3</Content>

</telerik:RadEditor>

</form>

</body>

</html>

Accepted

answered on 16 Sep 2010, 02:11 PM

Hello Joshua,

Could you please set all RadEditor's skins to Vista? This will remove the top and bottom borders in IE7 too.

<style type="text/css">

.reWrapper_corner, .reWrapper_center

{

display: none !important;

}

.reLeftVerticalSide, .reRightVerticalSide, .reToolZone, .reToolCell

{

background: white !important;

}

.reContentCell

{

border-width: 0 !important;

}

.reWrapper

{

border: 0 !important;

}

.RadEditor

{

filter: chroma(color=c2dcf0);

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadEditor ID="txtEditor2" runat="server" Skin="Vista" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 1</Content>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor1" runat="server" Skin="Vista" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 2</Content>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor2" runat="server" Skin="Vista" EditModes="Design" ToolbarMode="PageTop"

ToolsFile="NoTools.xml" ToolsWidth="684px" Width="99%" AutoResizeHeight="true"

ContentAreaMode="Div" BorderStyle="None" Height="150px">

<Content>Editor 3</Content>

</telerik:RadEditor>

Let me know if you need to hide the toolbars.

Best regards,
Rumen
the Telerik team