In RichTextBox area is a gray square

7 posts, 0 answers
  1. Pawel
    Pawel avatar
    39 posts
    Member since:
    Apr 2014

    Posted 22 Oct 2014 Link to this post

    I have very very plain test application with HtmlDataProvider and RadRichTextBox only. When I start the application RichTextBox area has small gray square in the corner (screen.png). I think this is a bug associated with HtmlDataProvider and html code which produce HtmlDataProvider.

    MainWindow.xaml
    <Window x:Class="TestTelerikWpfApp.MainWindow"
            xmlns:local="clr-namespace:TestTelerikWpfApp"
            Title="MainWindow" Height="300">
        <Window.Resources>
        </Window.Resources>
        <Grid>
            <telerik:HtmlDataProvider RichTextBox="{Binding ElementName=richTextBox}"
                                      Html="{Binding Path=Notes, Mode=TwoWay}" />
            <telerik:RadRichTextBox Name="richTextBox" Width="800" Height="600" />
     
        </Grid>
    </Window>

    MainWindow.xaml.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Windows;
    using System.Windows.Data;
    using Telerik.Windows.Controls;
     
    namespace TestTelerikWpfApp
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
     
                DataContext = new ViewModel();
            }
        }
    }

    ViewModel.cs
    using System;
    using Telerik.Windows.Controls;
     
    namespace TestTelerikWpfApp
    {
        public class ViewModel : ViewModelBase
        {
            private String notes;
            public String Notes
            {
                get
                {
                    if (null == notes)
                    {
                        Notes = String.Empty;
                    }
                    return this.notes;
                }
                set
                {
                    if (value != this.notes)
                    {
                        this.notes = value;
                        OnPropertyChanged(() => this.Notes);
                    }
                }
            }
        }
    }
  2.
  3. Petya
    Admin
    Petya avatar
    990 posts

    Posted 27 Oct 2014 Link to this post

    Hi Pawel,

    The behavior that you are experiencing a known visual glitch in RadRichTextBox, but is not actually related to the data provider that is bound to the control. The rectangle is in the template of the control to allow showing both vertical and horizontal scrollbar properly as shown in the attached image. 

    In fact, this should be visible only when the control is initially loaded and as soon as you start typing, the rectangle should disappear. Could you confirm that?

    If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox. Alternatively, you could force a measure of the control once it is loaded and everything should work fine.

    I hope this helps.

    Regards,
    Petya
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Pawel
    Pawel avatar
    39 posts
    Member since:
    Apr 2014

    Posted 31 Oct 2014 Link to this post

    In fact, this should be visible only when the control is initially
    loaded and as soon as you start typing, the rectangle should disappear.
    Could you confirm that?


    I can partially confirm this. When I writing text in the first line, gray box is all time (screen1.png). When I enter "Enter key", gray box disappears (screen2.png) so I suppose I can add and remove new line before editing.

    Alternatively, you could force a measure of the control once it is loaded and everything should work fine.

    What do you mean? I don't understand.
  7. Pawel
    Pawel avatar
    39 posts
    Member since:
    Apr 2014

    Posted 03 Nov 2014 Link to this post

    If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox.

    I listened to your advice and I was able to remove the gray square using the RadRichTextBox template editing. Thanks.
  8.
  9. Igor
    Igor avatar
    2 posts
    Member since:
    Dec 2014

    Posted 13 Feb 2015 Link to this post

    Petya wrote:
    If you want to ensure this is not visible when you show the control, you could change the template of RadRichTextBox. Alternatively, you could force a measure of the control once it is loaded and everything should work fine.

    Hello,

    sorry for posting in this old thread, but I have the same problem with that control. But it's even worse.
    My control ist very narrow (only one line is visible).

    When this gray square is shown, the text of the RichTextBox is also moved up (shown with some margin). This leads to the effect, that my text is outside of the users view (see the attached picture. On the screenshot you can only see the red underline of the spell checker. The text itself is hidden, it's above).

    I tried to invoke a measure of the control, like you said which really made the gray square disappear. The text however remains moved up.
    As soon as I start typing (changing the preset text) the text comes down and I can see it (See second picture).

    How can I workaround this strange behavior?

    If I need to override the ControlTemplate, could you please provide it, so that I can directly copy the xaml?

    Thank you very much.
  11. Petya
    Admin
    Petya avatar
    990 posts

    Posted 16 Feb 2015 Link to this post

    Hi Igor,

    I think the behavior you are experiencing is related to something else. As I mentioned before, the gray square is simply a visual glitch and it has no effect over the layout of documents shown in the control.

    What I presume is forcing this look is the fact that the paragraph in the controls has some SpacingAfter applied. By default, the value of the property is 9pt which makes the last row of each paragraph a bit distant from the next paragraph.

    Depending on the way you are adding the content in RadRichTextBox you can set the property to 0. For example, try changing the ParagraphDefaultSpacingAfter of the current document:
    this.radRichTextBox.Document.ParagraphDefaultSpacingAfter = 0;

    Note that once the document in the control is changed with a new one, the value will be reset to its default.

    Regards,
    Petya
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Igor
    Igor avatar
    2 posts
    Member since:
    Dec 2014

    Posted 17 Feb 2015 in reply to Petya Link to this post

    Thank you for your answer. The ParagraphSpacingAfter was not sufficient. I also had to set the LineSpacing to zero.
    But then it worked fine.

    Thank you very much.
  14.
Back to Top