How to remove space between RichTextBox and its document

[Licenses]

hello,

When using "Paged" as LayoutMode, there is by default some space between the document and the edges of the RichTextBox. (This space has by default a blue color, like in the screenshot.)

Could you please explain me how I can 'remove' this space on all 4 sides of the document? Basically, I want the RichTextBox to match the size of the document it contains.

Thanks
Sodi

[Iva Toteva]

Hi Sodi We,

Unfortunately the minimum space around the document pages is currently 20 pixels and cannot be removed. Also there issues in RadRichTextBox related to calculating automatic width. However you can "hide" the blue areas by changing the color. You can achieve this by changing RadRichTextBox control template. I have attached sample project that demonstrates the approach, using specific control/page size.

If you do not want to have the space divided into pages at all and let the content flow using this extra space, you most probably need to be using the Flow LayoutMode.

We can try to help you further with this if you explain in more details what scenario are you trying to accomplish.

All the best,
Iva
the Telerik team

[Licenses]

Hi Iva,

the issue I'm having is that I need to add several RTEs on a page and in paged mode the whole page in A4 format is shown inside the editor, even if I only have 3 lines of text in the document. Now what I want is that RTE is sized to the size of the text (= 3 lines), so that the scrollbar in the RTE is gone and the text should start in the upper left corner (without the spacing)

I've attached a screenshot so you can see what I mean.

I've already changed the code so that the RTE toolbar is only shown when the RTE has focus, this enhances the page a lot, but the 2 scrollbars (1 for the RTE and 1 for the page) are overkill

[Mike]

Hi Sodi We,

In this case you can try using Flow layout mode. Can you please test this option and let us know if you have problems with it.

Sincerely yours,
Mike
the Telerik team

[Licenses]

Hello Mike,

I tried using the 'Flow' layout mode and my RTE looks much better now. But I had to add some code to the function which makes the toolbar of the RTE visible: I had to set the focus back to the RichTextBox and I also had to set the caret position back to its initial position.

I have an additional question. I would like to make sure that the RichTextBox does not get a scrollbar when the user types more lines than the height of the textbox can handle. Instead I want the textbox to have an inital height of, for example 250 pixels, and to grow automatically in height when the content grows beyond 250 pixels. I was able to implement this behavior by adding the following XAML code :

<telerikDocuments:RadRichTextBox.Resources>
    <Style TargetType="telerikDocumentsUI:DocumentWebLayoutPresenter">
        <Setter Property="MinHeight" Value="250"/>
    </Style>
</telerikDocuments:RadRichTextBox.Resources>

However, when I run my application, the content of the RichTextBox starts at the center of the textbox instead of in the upper left corner. Setting the VerticalAlignment and VerticalContentAlignment properties to Top did not work.

Any ideas?

Thanks
Sodi

[Iva Toteva]

Hello Sodi We,

The easiest way to set the minimum height and the lack of scrollbars in a RadRichTextBox is by using its properties MinHeight and VerticalScrollBarVisibility.
As for the position of the text in the document, you should use the SectionDefaultPageMargin property of RadDocument.
All in one, you should have something like this in your XAML:

<telerik:RadRichTextBox Name="radrichTextBox" VerticalScrollBarVisibility="Hidden" MinHeight="250">
      <telerik:RadDocument LayoutMode="Flow" SectionDefaultPageMargin="0,0,0,0"/>
</telerik:RadRichTextBox>

I am attaching a simple demo for your convenience.

Greetings,
Iva
the Telerik team