Empty white space at the top of the editor text area

[WEBSRFR]

The text editing area of the editor seems to have about 3 lines worth of white space at the top that I can't reach or get rid of. I've tried various settings and width/height combinations but there is always that empty white space at the top. The code for the Editor I am using is enclosed below along with a screen capture. Thanks for any help in getting rid of the white space at the top.

<telerik:RadEditor ID="raeMessage" Runat="server" Width="340px"
Height="300px" EmptyMessage="Please type your message here..." MaxHtmlLength="10000" AutoResizeHeight="True" EditModes="Design" EnableResize="False">
<Tools>
<telerik:EditorToolGroup Tag="MainToolbar">
<telerik:EditorTool Name="FindAndReplace" RenderMode="Classic" />
<telerik:EditorSeparator RenderMode="Classic" />
<telerik:EditorSplitButton Name="Undo" RenderMode="Classic">
</telerik:EditorSplitButton>
<telerik:EditorSplitButton Name="Redo" RenderMode="Classic">
</telerik:EditorSplitButton>
<telerik:EditorSeparator RenderMode="Classic" />
<telerik:EditorTool Name="Cut" RenderMode="Classic" />
<telerik:EditorTool Name="Copy" RenderMode="Classic" />
<telerik:EditorTool Name="Paste" RenderMode="Classic" ShortCut="CTRL+V / CMD+V" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup Tag="Formatting">
<telerik:EditorTool Name="Bold" RenderMode="Classic" />
<telerik:EditorTool Name="Italic" RenderMode="Classic" />
<telerik:EditorTool Name="Underline" RenderMode="Classic" />
<telerik:EditorSeparator RenderMode="Classic" />
<telerik:EditorSplitButton Name="ForeColor" RenderMode="Classic">
</telerik:EditorSplitButton>
<telerik:EditorSplitButton Name="BackColor" RenderMode="Classic">
</telerik:EditorSplitButton>
<telerik:EditorSeparator RenderMode="Classic" />
<telerik:EditorDropDown Name="FontName" RenderMode="Classic">
</telerik:EditorDropDown>
<telerik:EditorDropDown Name="RealFontSize" RenderMode="Classic">
</telerik:EditorDropDown>
</telerik:EditorToolGroup>
</Tools>
<Content>
</Content>
<TrackChangesSettings CanAcceptTrackChanges="False" />
</telerik:RadEditor>

[Joana]

Hi,

I have already answered you in the support ticket, you have opened. For your convenience, I will paste the answer here too, but lets keep the conversation in the support thread.

I am not able to reproduce the issue on my side. I have tested with the latest version of the Telerik.Web.UI(currently Q3 SP1). Could you confirm that you are using the same version? The cause of the issue might be some custom styles that you have applied to your page. I suggest you try:

1. Check whether the issue is reproducible in other browser than IE
2. Remove the custom styles from the page and isolate the RadEditor in a simple blank page to verify that the issue comes from the control.

In addition you could try to reproduce the behavior in our online demos.

I reviewed the piece of code you sent - you may not set RenderMode="Classic" to all of the tools. You just need to set it to the RadEditor and so it will be rendered in classic mode.

Regards,
Joana
Telerik

 

 

[WEBSRFR]

Hi Joanna,

Thanks for your reply and I will reply to you on the support thread but I just wanted to add in case anyone else is having the same issue that I have been able to reproduce this issue.

I created an ASP.net Web Forms project (individual accounts using Identity) and then placed the Rad Editor onto a blank content page (default.aspx with master page) and I see the exact same issue. Basically there is a "blank area" at the top of the editor text area.

I have not defined any special CSS/styles on this page as it is a simple default project created by Visual Studio. The only CSS there is, of course, the Bootstrap CSS and it being an integral part of Visual Studio ASP.net development the RadEditor should be able to coexist with the Bootstrap CSS.

I have enclosed the default project file i created with the Rad text editor.

[WEBSRFR]

I tried to post the default Visual Studio project file that was created by Visual Studio but the Zipped file is 26MB so I was not able to post it. But I can confirm that all I did is create a new Visual Studio project and then add the Rad Editor to Default.aspx page with an underlying Master Page.

The only CSS/styles I can think that would interfere with the editor is the Bootstrap CSS as this is basically a default Visual Studio project.

[Joana]

Hi,

I will close this forum thread as the issue was resolved in the support ticket you've opened. Here's the resolution explained in the support ticket:


The problem comes from the /Content/Site.css styles. There is a global rule for the body element:

Copy Code

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

By default RadEditor loads the loaded in the page styles in the content area. What you can do is either remove this rule from the Site.css or cascade it through a certain CSS class. You can also set the editor's CssFiles collection to include only specific SCC files in the control's content area. Check the following online demo and documentation:
http://demos.telerik.com/aspnet-ajax/editor/examples/cssfiles/defaultcs.aspx
http://www.telerik.com/help/aspnet-ajax/editor-css-styles.html

Regards,
Joana
Telerik

 

 

[George]

I ran into this problem and I thank you for explaining the problem.  I think it is a bug that the editor would use the padding from the body which means you can't put spacing on a body that has an editor in it and probably other Rad controls.  There may be some technical reason but I think it is wrong. I am using Bootstrap because some Microsoft educational videos told me to. These controls are for the Visual Studio ASP.NET market where Microsoft is pushing us to use Bootstrap. That they are not compatible is wrong and should be consider a Telerik bug.  Finding this explanation took quite a while. 

My workaround to this Telerik problem that seems to work in a Master site environment with a toolbar:

Change the body to only do the bottom, for the footer and create a new class for a spacer

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

// changed this to
body {
    padding-bottom: 25px;   // this does not seem to effect the editor
}

.HRTopPushDown {
   height:20px;
   visibility:hidden;
}

The space is an hr tag with class HRTopPushDown placed in each Site Master before where the content is defined or just after the body tag.

                      </LoggedInTemplate>
                   </asp:LoginView>
               </div>
           </div>
       </div>
<hr class="HRTopPushDown" />  // this is the added line to provide spacing from the top

      <div class="container body-content">
           <asp:ContentPlaceHolder ID="MainContentMembers" runat="server">
           </asp:ContentPlaceHolder>
           <hr />
       </div>

[Ianko]

Hello George,

The same matter is also discussed in this forum thread.

The discussed matter here is about the CSS rules added to the body of the content area. This is a behavior that is expected due to browser's native behavior. Any iframe inside an HTML page will include all CSS references from the head element of the parent page. One way to eliminate this is setting the ContentAreaMode to Div. With that, the content area will become div element not an iframe. Although, you should note that still will be styled from the page's CSS rules.

If iframe is still needed, you can use this option to clear any CSS styles inherited from the main page:

<telerik:RadEditor runat="server" ID="RadEdirtor1">
    <CssFiles>
        <telerik:EditorCssFile />
    </CssFiles>
</telerik:RadEditor>

Regards,
Ianko
Telerik