Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadEditor with no borders?

4 Answers 272 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Joshua Deye
Top achievements
Rank 1
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

Sort by
0
Bozhidar
Telerik team
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">
<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
0
Joshua Deye
Top achievements
Rank 1
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:
<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>
0
Accepted
Rumen
Telerik team
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
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
0
Joshua Deye
Top achievements
Rank 1
answered on 17 Sep 2010, 01:07 PM
That did the trick.

Thanks for the help.
Tags
Editor
Asked by
Joshua Deye
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Joshua Deye
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or