RadEditor ToolFile problem

[Chris]

I have a RadEditor and it links to my toolfile.xml.  Inside the XML file, I do not include any tools.  My xml file looks exactly like this

<root></root>

However, on page loads, the editor loads without any issue.  However, it leaves quite amount of space between the top border and the top of the TextArea.  Please let me know if there is any way I can fix this.  Also, please let me know if it happens on your end.  I am using XP Professional, IE 7.0

Chris

[Todd Anglin]

Chris-

Out of curiosity, what is the scenario you're using the Editor for with no tools? Are you just after the keyboard short-cuts for entering text? If you're just trying to display HTML, you'd probably be better-off not using RadEditor and instead using a simple DIV tag.

I'm not entirely sure if there is a way to get rid of the gap you're seeing, but I'll do some testing to be sure. In the mean time, I look forward to your extra details.

-Todd

[Chris]

I do need the Editor to toggle between HTML, Designer and Preview.  However, I do not want to show any editor tool to the user.  That's why I need to use ToolFile.xml to eliminating the tool set from the top of the editor.

[Rumen]

Hi Chris,

If you would like to decrease the space between the top border and the top of the content area (shown in the attached screenshot) set the following class in the page with the editor:

<style>
.rade_wrapper_corner.rade_corner_top_left, .rade_wrapper_center.rade_center_top, .rade_wrapper_corner.rade_corner_top_right
{
    display: none;
}
</style>

If I am missing something, please open a support ticket and send a screenshot of the problem and of the expected look.

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

IE 7.0 works but IE6.0 Service Pack 2 doesn't work.  Please help.

[Chris]

Any solution for IE6 to be working???

[Rumen]

Hi Chris,

Here is how to modify the css style to reduce the border in IE 6 too:

<style>
.rade_wrapper_corner.rade_corner_top_left, .rade_wrapper_center.rade_center_top, .rade_wrapper_corner.rade_corner_top_right, .Default.rade_toolbarWrapper
{
    display: none;
}
</style>

Greetings,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

It works in regular aspx file but it doesn't work in ascx file in DNN.  Previous version used to work perfectly fine.  I have no idea why after getting the latest version this simple setting doesn't work and it has been a week this is still an issue.  All I want is just not showing any tools to the user and from the editor.  I am really frustrated.

Chris

[Todd Anglin]

Chris-

I'm very sorry it has gotten to this point and you still don't have a solution! We try very hard to help all developers implement their solutions as quickly as possible, but clearly we're missing the mark here with our proposed fixes. So let's see if we can figure out what's happening in your UserControl in DNN.

First, what was the last version you were using before upgrading to the latest release? Was it the RadEditor for ASP.NET AJAX or the "classic" RadEditor? If it was the first, there shouldn't be any significant changes in the Editor between the last two releases, so something funny in your site's environment is at play.

Assuming that's the case, and assuming you've gotten as far as displaying an Editor with no tools in DNN (and now you're just trying to eliminate the gap), have you tried using a CSS debugging tool like FireBug or the IE Developer Toolbar to see how the CSS rules are being applied on your page? The CSS rules that Rumen supplied should completely eliminate the toolbar "gap," so I am curious to see if the rules are being correctly applied to the Editor in DNN.

Finally, if you'd like a thorough review of your situation, you can simply create a support ticket and attack your UserControl that contains the Editor. Submitting that with any extra relevant code should enable our developers to quickly test your implementation and provide you with the necessary code to fix the problem.

I hope these options help and I look forward to helping you quickly resolve your problem.

-Todd

[Chris]

Thanks for your prompt feedback, my previous version is 2007.03.1314.20.  It was the Prometheus Q3 Service Pack 2.

I guess I will try to use the FireBug.  Also would you please direct me a webpage to see the API for RadEditor css class.

* I figure all the style issues I have doesn't apply to IE6 and IE7.  Firefox works fine with the style.

[Todd Anglin]

Okay, the version you upgraded from shouldn't be very different in terms of CSS design. I think something else must be at play.

The best resources for skinning online (currently) are the docs and FireBug/IE Developer Toolbar. There is not a great API reference of the CSS styles separate from what you can derive from those two locations. Good idea, though. We'll definitely work on adding that.

In the mean time, check out this page in the docs:
http://www.telerik.com/help/radcontrols/prometheus/?CreateNewSkin.html

And since you're trying to display no toolbars, check out this online demo:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/
ToolbarMode/DefaultCS.aspx

Let me know if this helps.

-Todd

[Chris]

I tried both, they don't really help much.
I guess I will try to create a sample project to test and may use that for creating the ticket. 

Thanks Todd

[Todd Anglin]

Chris-

I've been doing some follow-up research and observed that an empty tools file seems to work fine by default in FF2, IE8, and IE7. I don't have IE6 handy, but I am assuming it looks different than the way RadEditor renders by default in these other browsers.

To that end, I wanted to add a comment to the CSS values Rumen provided. I think he was assuming you were using the Default Editor theme. If you are, then nothing changes. If you aren't, you need to change the property he added for IE6 from ".Default.rade_toolbarWrapper" to ".SkinName.rade_toolbarWrapper". That may help.

-Todd

[Chris]

I am using Vista and it doesn't really help.  However I can describe what I found so far.  When it first loads, I do see it content area vertically aligned to the top but after a second or so, it moves it down to leave so much spacing between the top and the content area.  And another interesting findings I have is in IE 7, there is tabs from the browswer.  Once I clicked on another tabs and sit on another tabs for around 2 second then click back to the page with the editor, the content area just aligned it to the top.  If I toggling between different tabs too fast, it won't happen.  It has to switch to another tab for at least 2 seconds to see the content area to line up top.  So weird.

Chris

[Chris]

I think I figured out the issue. Hope you can get me the answer.

The issue happens due to the doctype.

The following doctype works fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The following doctype doesn't display correctly
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Chris

[Chris]

I think there is more issues, I will create a ticket.

[Todd Anglin]

Chris-

Sorry for the delay. I thought you had indicated in your last post that you'd found a solution. If changing the DOCTYPE to XHTML Transitional solves the problem, is this a viable solution for your project? The difference between your current HTML 4.0 Transitional and the XHTML 1.0 Transitional should be negligible. Switching would also bring your project more inline with the majority of apps developed today that favor the XHTML Transitional DTD.

Let me know if that doesn't work for you and we can work on trying to find another solution.

-Todd

[Chris]

Thanks for your reply but currently my website needs to be HTML4.0 because I realize there are quite lots of UI look and feel changes once I updated it to XHMTL1.0, mostly style sheet problems.

Chris

[Tervel]

Hi Chris,

This thread was escalated to me. I examined the problem, and, since changing the DOCTYPE to avoid rendering in quirksmode is not an option, I suggest you use the following approach:

Add this css somewhere on the page:

<style>
.rade_toolZone
{
height:0px !important;
border: 1px solid #515151;
}
</style>

The problem ultimately comes from a strange IE bug when the toolbar area element would not have its height properly set if emtpy and without an explicitly set border.
So, it is necessary to have a border set - then the height setting will also work.

I hope this helps.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Chris]

Thanks, it finally works.  Appreciated it.