Is there any way to remove RadEditor HTML mode border?

2 Answers 23 Views
Ajax Editor Styling
Nancy
Top achievements
Rank 1
Iron
Nancy asked on 21 Jan 2025, 09:23 PM

Hello!  This is my first time using a RadEditor.  I've figured out a lot of the settings. 

However, I am still having problems with the HTML edit mode.  The content is surrounded by a too narrow border/container.  When entering large amounts of text, it wraps and is hard to read.  Is there any way to remove this border/container, or make it wider, so that the whole width of the RadEditor is available for HTML content?

Thanks!

2 Answers, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 22 Jan 2025, 08:15 AM

Hi Nancy,

I hope you are doing well!

The problem is most likely due to some CSS on the page which is overriding the default values of the HTML content area.

To address the issue of the narrow border/container in the HTML edit mode of RadEditor, you can adjust the width and height of the HTML mode TextArea to make it more comfortable for editing large amounts of text. Here's how you can do it via JavaScript:

        <script type="text/javascript">  
            function OnClientLoad(editor) {
                var area = editor.get_textArea(); //get reference to the textarea of RadEditor in Html mode  
                area.style.color = "red";
                area.style.backgroundColor = "yellow";
                area.style.width = "640px";
                area.style.height = "480px";
            }
        </script>

        <telerik:RadEditor runat="server"
            OnClientLoad="OnClientLoad"
            ID="RadEditor1">
        </telerik:RadEditor>

Alternatively, you can use CSS to fix its size:

        <style>
            .reTextArea {
                width: 800px !important;
                height: 300px !important;
                background-color: red !important;
            }
        </style>

Last but not least, you can also inspect with DevTools the HTML area and the applied CSS properties to it to figure out where the problem comes from and fix it. 

    Regards,
    Rumen
    Progress Telerik

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
    0
    Nancy
    Top achievements
    Rank 1
    Iron
    answered on 22 Jan 2025, 11:18 PM

    Thanks Rumen!  Your CSS solution wasn't exactly the right thing, but it got me thinking in the right direction.  What works for me is:

            .reTextArea 
            {
                max-width: none !important;
            }
    Rumen
    Telerik team
    commented on 23 Jan 2025, 08:03 AM

    You're welcome! I'm glad my suggestion helped you find the right solution. Setting max-width: none !important; for .reTextArea makes perfect sense if you're overriding a restrictive width. Thanks for sharing your approach—this could definitely help others facing a similar issue!
    James
    Top achievements
    Rank 1
    commented on 24 Jan 2025, 05:34 AM | edited

    Thanks for answering as well, you made my day. 
    Tags
    Ajax Editor Styling
    Asked by
    Nancy
    Top achievements
    Rank 1
    Iron
    Answers by
    Rumen
    Telerik team
    Nancy
    Top achievements
    Rank 1
    Iron
    Share this question
    or