Editor Percent Height Issues

[Brad]

Hi,

I'm pretty sure I've found a bug in the RadEditor in how it handles Height attributes when expressed in percent.  I'm running the latest version of the ASPNET AJAX control suite (Q3-2008).  What I would like to do is set the editor to be 100% of the height of the parent tag (be it div, form, etc.).  However, when I set the Height attribute to be 100%, it seems to render as 100px.  I've tried experimenting around with setting different vaules (both in % and px), but it seems that the actual height ends up being the number value in pixels.

For example:

    <div style="height:100%; background-color:#eeeeee;">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Vista" Width="100%" Height="100%">
            <Content></Content>
        </telerik:RadEditor>
    </div>

Renders the following HTML:

<div style="height: 100%; background-color: rgb(238, 238, 238);">
<script type="text/javascript">...</script>
<div id="RadEditor1" class="radeditor Vista rade_wrapper" style="height: 100px; width: 100%;">
<div id="RadEditor1dialogOpener" style="display: none;">...</div>
<table id="RadEditor1Wrapper" cellspacing="0" cellpadding="0" style="table-layout: auto; width: 100%; height: 100px;">
</table>
<input id="RadEditor1_ClientState" type="hidden" name="RadEditor1_ClientState" autocomplete="off"/>
</div>
</div>

(which shows that the wrapper table and wrapper div are set explicitly to 100px)
I've tried changing the % values and the output is consitantly transposing the % to px.
I can provide a simplified project to illustrate the issue.

Thanks,
Brad Blackmon

[Svetlina Anati]

Hi Brad,

In order to get the desired appearance you should use CSS or javascript means. In case you want the editor to get 100% of the viewport you can use the following approach:

function OnClientLoad(editor, args)
{
     editor.fire("ToggleScreenMode");
}
        </script>
        <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Vista" OnClientLoadOnClientLoad=OnClientLoad >
        </telerik:RadEditor>

as explained here.

Otherwise you can write your own custom code and set the desired height and with as shown below:

function OnClientLoad(sender, args)
{
    //calculate myHeight and myWidth here
    sender.get_contentAreaElement().style.height = myHeight;
    sender.get_contentAreaElement().style.width = myWidth;
}

In case you need further assistance, please provide more information about your exact scenario and the desired behavior.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Brad]

Svetlina,

Thank you for your response.   I tried your suggestions, but, unfortunately neither of them was exactly what I was looking for.  The ToggleScreenMode fix is good if you want your editor to be 100% of the viewport, but that's not exactly what I want.  I have a Header and Footer div that needs to be visible, and the ToggleScreenMode displays the editor over those divs.

Setting the style on the contentAreaElement didn't exactly work, either, but it did get me to thinking, and I did find a working solution (for my situation, anyway).  For the editor control definition:

<telerik:RadEditor
   ID="edtHTML"
   runat="server"
   Width="100%"
   Height="100%"
   EnableResize="false"
   onclientLoad="OnClientLoad"
   Skin="Vista">
</telerik:RadEditor>

I coded the OnClientLoad as follows:

function OnClientLoad(editor)
{
     editor.get_element().style.height = '100%';
     document.getElementById(editor.get_element().id+'Wrapper').style.height = '100%';
}

This just resets the style attributes of the wrapper div and wrapper table from the '100px' value back to the proper '100%' value.  Once I did that, the editor grows & shrinks appropriately as I resize the browser window.

--Brad

[Jay]

This sounds like the same issue I'm encountering.

I would like to set the width and height of my RadEditor control to a unit other than pixels.  I have code like this:

<asp:Panel ID="ScratchPanel" runat="server" GroupingText="Scratch Area">
    <telerik:RadEditor ID="TMPEditor" runat="server" Height="50ex" Width="60em" />
</asp:Panel>

And it renders HTML code correctly, like this:

        <div id="ctl02_ScratchPanel">
            <fieldset>
                <legend>
                    Scratch Area
                </legend>
                <div id="ctl02_TMPEditor" class="radeditor Default rade_wrapper " style="height:50ex;width:60em;">
                    <div id="ctl02_ctl02_TMPEditordialogOpener" style="display:none;">
                        <div id="ctl02_ctl02_TMPEditordialogOpener_Window" style="display:none;">

                            <input id="ctl02_ctl02_TMPEditordialogOpener_Window_ClientState" name="ctl02_ctl02_TMPEditordialogOpener_Window_ClientState" type="hidden" />
                        </div><input id="ctl02_ctl02_TMPEditordialogOpener_ClientState" name="ctl02_ctl02_TMPEditordialogOpener_ClientState" type="hidden" />
                    </div><table id="ctl02_TMPEditorWrapper" cellpadding="0" cellspacing="0" style="table-layout:auto;width:100%;height:50ex;">
                        <tbody>
...













































                        </tbody>
                    </table><input id="ctl02_TMPEditor_ClientState" name="ctl02_TMPEditor_ClientState" type="hidden" />

                </div>

            </fieldset>
        </div>

But, it doesn't display correctly - it overflows past my div border and looks awful.  So, I check with my Firefox "DOM Inspector" tool and find that the current style for the RadEditor's outer div is "height:50px; width:60em;".

It seems like some javascript overwrites the styles with the erroneous values at the page load (and even appears this way, as for a split-second after I load the page, the div surrounds the Editor control correctly, but then changes to the wrong/small value immediately)

[Brad]

LOL..I'm glad to know I'm not the only one.  From my experience, it seems that there is some code somewhere (I don't know if it's in javascript or server-side) that takes your height value from the editor tag, turns it into a number (thus stripping off the unit), then later, appends "px" on the end of the number.  This results in changing my "100%" to "100px", and your "50ex" to "50px".  My best advice is to do what I did, and hook the OnClientLoad event on the editor, and manually change the table and div wrappers. 

 

The only bad thing is that it relys on the naming convention "<ControlID>Wrapper" for the ID on the underlying table wrapper.  This seems to work fine now, but there's no guarantee that the naming convention won't change in upcoming releases.  Although, hopefully, in upcoming releases, the issue will be corrected.

 

Good Luck!

 

 --Brad

[Brad]

P.S. One other Thought:

I'm pretty sure that the Firefox DOM Inspector shows the HTML as it was transmitted from the original server response, and does not take into account any javascript actions done to the HTML.

A better tool to use is Firebug (a free add in to Firefox), which shows you in real time the HTML, taking into account changes made by any javascript or CSS actions.  It's a really great tool to use, and has saved me countless hours of development time!

 --Brad

[Rumen]

Hi Brad,

RadEditor has a function that sets correctly the height size in pixels.
However the different browsers behave differently when the height is set in percents and it is very hard to implement a reliable solution for this scenario. This feature is in our ToDo list and we will try to implement it for one of the next versions.

Currently, we solve the height in percents problems on a case by case basic using javascript. If you would like you can open a support ticket and send us a sample working project that demonstrates the problem that you experience. Once we reproduce the issue on our side, we will provide a javascript code solution.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.