Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

ContentAreaMode "Div" and Scrolling problems

11 Answers 238 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Meena
Top achievements
Rank 1
Meena asked on 01 Oct 2010, 04:26 PM
capture.JPG
Hi,
  I have around 5 radeditors in a page. I have set the Toolbar Mode to "ShowOnFocus" on all of them.As I had problems with printing html with IFrame, I changed the ContentAreaMode to Div. Now when I enter text  inside the radeditor and try to scroll down the page, the ouside wrapper of the radeditor moves but the text that I entered doesn't move.
 Also this happens with the toolbar too.I have attached an image of the form where its happeneing for your reference.Please help me solve this problem.

Thanks
Meena

11 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 04 Oct 2010, 04:12 PM
Hello Meena,

Did you enter enough text for the RadEditor control to display scrollbars? In your screenshot, it doesn't show any scollbars on your RadEditor controls, since they appear blank.
0
Meena
Top achievements
Rank 1
answered on 04 Oct 2010, 04:19 PM
Its not the scroll bar on the radeditor. Its the page(window) scroll. When I scroll down the page, the text that I enetered on the (first)radeditor and also the toolbar doesn't move up along with the page.
0
Rumen
Telerik team
answered on 05 Oct 2010, 04:32 PM
div-contentarea-showonfocus-toolbar.zip
Hello Meena,

I tried to reproduce the reported problem, but without success. Could you please test the attached project, which works properly on my end?

You can try to modify it so that the problem is reproducible and send it for examination by opening a support ticket.

Best wishes,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Meena
Top achievements
Rank 1
answered on 05 Oct 2010, 06:24 PM
Hi Rumen,
  Thanks for your response. I tried your code and it worked fine. But the problem comes when I add the radsplitter. Here is the code:

 

 

<telerik:RadSplitter ID="splitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal">
<telerik:RadPane ID="pneComp" runat="server" Width="100%" height="75%" scrolling="Y" >
<asp:panel ID="pnlCompAssessment" Height="100%" Width="100%" ScrollBars="None" runat="server">
<table id="tblAssessment" runat="server" enableviewstate="true" Width="100%">
<tr><td>
<br />editor1:
<telerik:radeditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div" ID="RadEditor1" EditModes="Design" Height="100px" Width="600px" Skin="Outlook"></telerik:radeditor> </td></tr>
 <tr><td><br />editor2:
<telerik:radeditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div" ID="RadEditor2" EditModes="Design" Height="100px" Width="600px" Skin="Outlook"></telerik:radeditor> </td></tr>
 <tr><td><br />editor3:
<telerik:radeditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div" ID="RadEditor3" EditModes="Design" Height="100px" Width="600px" Skin="Outlook"></telerik:radeditor> </td></tr>
 <tr><td><br />editor4:
<telerik:radeditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div" ID="RadEditor4" EditModes="Design" Height="100px" Width="600px" Skin="Outlook"></telerik:radeditor> </td></tr>
 <tr><td><br />editor5:
<telerik:radeditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div" ID="RadEditor5" EditModes="Design" Height="100px" Width="600px" Skin="Outlook"></telerik:radeditor> </td></tr>
</table>
</asp:panel>
</telerik:RadPane>
</telerik:RadSplitter> 

 

 


Why does it happen within a radsplitter?. I need to have radsplitter in my page.

Thanks
Meena
0
Rumen
Telerik team
answered on 06 Oct 2010, 04:51 PM
Hi Meena,

Thank you for the additional information.

The ShowOnFocus toolbar is attached to the <body> element of the page, so that it is movabled when the page is scrolled. ShowOnFocus is not attached  to the element containing the editor. That is why when you scroll the splitter pane, the toolbar is not scrolled, because it is not contained in the pane.

What you can do is to choose one of the other ToolbarMode settings or try the code below which will hide the toolbar when the scroll inside RadPane is moved and display the toolbar when the focus is set in the editor:

<%@ Page Language="C#" ValidateRequest="false" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            margin: 0;
            padding:0;
            height: 100%;   
        }
        .relativePos{position: relative;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
 
    <script type="text/javascript">
        var editors = new Array();
        function editorLoad(editor, args)
        {
            editors.push(editor);
        }
 
        function splitterLoaded(splitter, args)
        {
 
            var pane = splitter.getPaneById("pneComp");
 
            if ($telerik.isIE)
            {
                pane.getContentElement().attachEvent("onscroll", scrollHandler);
            }
            else {
                pane.getContentElement().addEventListener("scroll", scrollHandler, false); }
        }
 
        function scrollHandler() {
            for (var i = 0; i < editors.length; i++) {
                var editor = editors[i];
                var tWnd = editor.get_toolAdapter().get_window();
 
                tWnd.hide();
            }
        }
    </script>
 
    <telerik:RadSplitter ID="splitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal" OnClientLoaded="splitterLoaded">
        <telerik:RadPane ID="pneComp" runat="server" Width="100%" Height="75%" Scrolling="Y" CssClass="relativePos">
            <asp:Panel ID="pnlCompAssessment" Height="100%" Width="100%" ScrollBars="None" runat="server">
                <table id="tblAssessment" runat="server" enableviewstate="true" width="100%">
                    <tr>
                        <td>
                            <br />
                            editor1:
                            <telerik:RadEditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div"
                                ID="RadEditor1" EditModes="Design" Height="100px" Width="600px" Skin="Outlook" OnClientLoad="editorLoad">
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            editor2:
                            <telerik:RadEditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div"
                                ID="RadEditor2" EditModes="Design" Height="100px" Width="600px" Skin="Outlook" OnClientLoad="editorLoad">
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            editor3:
                            <telerik:RadEditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div"
                                ID="RadEditor3" EditModes="Design" Height="100px" Width="600px" Skin="Outlook" OnClientLoad="editorLoad">
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            editor4:
                            <telerik:RadEditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div"
                                ID="RadEditor4" EditModes="Design" Height="100px" Width="600px" Skin="Outlook" OnClientLoad="editorLoad">
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br />
                            editor5:
                            <telerik:RadEditor runat="server" ToolbarMode="ShowOnFocus" ContentAreaMode="Div"
                                ID="RadEditor5" EditModes="Design" Height="100px" Width="600px" Skin="Outlook" OnClientLoad="editorLoad">
                            </telerik:RadEditor>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
    </telerik:RadSplitter>
 
 
    </form>
</body>
</html>



Kind regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Meena
Top achievements
Rank 1
answered on 07 Oct 2010, 01:59 PM
Hi Rumen,
     The solution you provided worked well for me. Thank You so much. I appreciate your help.

Thanks
Meena
0
Brian Stone
Top achievements
Rank 1
answered on 19 Oct 2010, 01:31 AM
Hi,

I had a very similar issue at my site and adding the "position: relative" CssClass to the RadPane did resolve the issue for me. 

My question is, can the RadPane position items differently when I am debugging code compared to when it is published?  I had been working on a project which involved converting the RadEditor to use "div" and adding RadSplitters but in my local environment the text scrolled with the rest of the screen.  However, once it was published this issue appeared.

Thanks,

Brian
0
Rumen
Telerik team
answered on 21 Oct 2010, 01:38 PM
Hello Brian,

Up to your question: Can the RadPane position items differently when I am debugging code compared to when it is published?
You should not experience such a problem if the editor and splitter work as expected on your development machine. Is it possible to send a live URL to the problematic page so that we can test it? You can also check what are the differences between the configuration of your production and development machines.

Best regards,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ted
Top achievements
Rank 1
answered on 25 Jan 2011, 08:26 PM
Brian, Just wanted to say Thanks for posting the position:relative fix you found.  it was driving me crazy.  I have 2 editors in a splitter on the right hand side of the screen and they are both in Div Mode.  the editors themselves were scrolling but the text inside the editors were not scrolling but I added the style position:relative; to the RadPane of the splitter and it fixed my issue also.

anyway, just wanted to say thanks.
0
balaji
Top achievements
Rank 1
answered on 24 May 2016, 12:01 PM

Hi rumen,

     

0
balaji
Top achievements
Rank 1
answered on 24 May 2016, 12:02 PM

Hi

This code is not working for me

Tags
Editor
Asked by
Meena
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Meena
Top achievements
Rank 1
Rumen
Telerik team
Brian Stone
Top achievements
Rank 1
Ted
Top achievements
Rank 1
balaji
Top achievements
Rank 1
Share this question
or