ContentAreaMode "Div" and Scrolling problems

12 posts, 0 answers
  1. Meena
    Meena avatar
    11 posts
    Member since:
    Jul 2008

    Posted 01 Oct 2010 Link to this post

    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
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 04 Oct 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Meena
    Meena avatar
    11 posts
    Member since:
    Jul 2008

    Posted 04 Oct 2010 Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 05 Oct 2010 Link to this post

    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
  6. Meena
    Meena avatar
    11 posts
    Member since:
    Jul 2008

    Posted 05 Oct 2010 Link to this post

    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
  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 06 Oct 2010 Link to this post

    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
  8. Meena
    Meena avatar
    11 posts
    Member since:
    Jul 2008

    Posted 07 Oct 2010 Link to this post

    Hi Rumen,
         The solution you provided worked well for me. Thank You so much. I appreciate your help.

    Thanks
    Meena
  9. Brian Stone
    Brian Stone avatar
    2 posts
    Member since:
    Feb 2010

    Posted 18 Oct 2010 Link to this post

    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
  10. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 21 Oct 2010 Link to this post

    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
  11. Ted
    Ted avatar
    47 posts
    Member since:
    Jan 2008

    Posted 25 Jan 2011 Link to this post

    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.
  12. balaji
    balaji avatar
    2 posts
    Member since:
    May 2016

    Posted 24 May in reply to Rumen Link to this post

    Hi rumen,

         

  13. balaji
    balaji avatar
    2 posts
    Member since:
    May 2016

    Posted 24 May in reply to Rumen Link to this post

    Hi

    This code is not working for me

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017