RadTextBox Multiline and wrap issue

[Johnny]

Hello there!

I've got a DAT file that I am trying to display its content in a RadTextBox. 

I've done that, however the problem is the formatting. I will be sharing screenshots of how I want it to be formatted and how it is actually formatting it. I've spent a few hours looking with no results therefore I hope a way exits to do this.

The image DatFile.png contains a screenshot of how my file looks like, with vertical and horizontal scrollbars to keep the text formatted in a readable way and only wrapping the text when the line is finished. If the line is too long, an horizontal scroll allows you to navigate and see the rest of the line without actually wrapping it to a new line and making it very hard to read.

The image code.png contains a screenshot of how it is being formatted in my RadTextBox.

The code below is the code of the RadTextBox on my aspx page

<telerik:RadTextBox ID="RadTextBox1" Runat="server" ReadOnly="True" TextMode="MultiLine" Resize="Both" Text='<%# Eval("FichierGrtn") %>' Width="1750px" Height="800px">
</telerik:RadTextBox>

After inserting the code above, I have just realized that the text box you guys used to insert the colored code is exactly the same thing I want for my text box to behave. I have included a screenshot for that as well under the name of "forums.png".

Please check all the attached screenshots in order to have a better idea regarding the problem I'm facing.

Thank you!

[Doncho]

Hi Johnny,

When RadTextBox is used with its TextMode property set to MultiLine, the control renders <textarea> element in the DOM. You can use some custom CSS to override the default styling of that textarea in any desired manner.

With the current requirement, you can try overriding the white-space style rule and set it to be "pre", check out this StackOverflow thread - HTML Textarea horizontal scroll.

Here is an approach you can try:

<style>
    html body .RadInput .preformattedTextarea {
        white-space: pre;
    }
</style>

<telerik:RadTextBox ID="RadTextBox1" runat="server" ReadOnly="True" TextMode="MultiLine" Resize="Both" Text='<%# Eval("FichierGrtn") %>' Width="1750px" Height="800px" CssClass="preformattedTextarea">
</telerik:RadTextBox>

Please give it a try and let me know how it goes.

Kind regards,
Doncho
Progress Telerik

[Johnny]

Hi Doncho,

Thanks a lot, it works perfectly! the radtextbox is now formatted exactly like it should be, similar to the screenshots in my original post above.

Have a nice day ahead!