Support forums » Products » Cute Editor for .NET » Re: Any way to suppress the scroll bars in the Editor?

Any way to suppress the scroll bars in the Editor?

Last post 11-10-2011, 6:35 AM by Kenneth. 14 replies.
Sort Posts: Previous Next

  •  07-07-2010, 11:53 AM 62333

    Any way to suppress the scroll bars in the Editor?

    Reply Quote
    We have a case where we make the Editor control read-only. We've been able to remove the toolbars and the bottom bar, but we can't figure out how to suppress the scroll bar(s). We don't want the content to scroll when it is in read-only mode. Is it possible?

  •  07-07-2010, 10:13 PM 62339 in reply to 62333

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi Richard,
     
    Try set ResizeMode="AutoAdjust"
     
    Regards,
     
    ken

  •  07-08-2010, 6:04 AM 62356 in reply to 62339

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    I assume this will automatically resize the window to the contents? This approach has the potential to make the web page very large if the content of the editor is large. The customer needs to access fields and buttons below the editor that only apply after content has been entered. If we expand the editor window we move the fields and buttons potentially very far down requiring a lot of scrolling which is a no-no in web app design. There's no way to just turn off scrolling like "scrollbars=no" in Javascript window.open?

  •  07-09-2010, 2:25 AM 62380 in reply to 62356

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi Richard,
     
    you said you set ReadOnly="true" and do not want the edtior have the scrollbar. and do not want editor automatically resize when the content is large. So please example your requirement on detial.
     If the content large than the editor height, what you want it to do? Hide? Delete? like overflow:hidden? maybe you have your special idea, if you can explain it on detial, it will very helpful. Maybe you can send me some screenshots to explain it.
     
    You can send the information to [email protected]
     
    Regards,
     
    ken

  •  07-09-2010, 9:38 PM 62407 in reply to 62356

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi Richard,
     
    Please try the example below
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    5.   
    6. <html xmlns="http://www.w3.org/1999/xhtml">   
    7. <head id="Head1" runat="server">   
    8.     <title>Untitled Page</title>   
    9. </head>   
    10. <body >   
    11.     <form id="form1" runat="server">   
    12.         <CE:Editor ID="editor1" runat="server" >   
    13.         </CE:Editor>   
    14.   
    15.     </form>   
    16. </body>   
    17. </html>   
    18. <script>   
    19. function CuteEditor_OnInitialized(editor)   
    20. {   
    21.     var editdoc = editor.GetDocument();   
    22.     //editdoc.body.scroll="no"; firefox does not support scroll   
    23.     editdoc.body.style.overflow="hidden";   
    24. }   
    25. </script>  
    Regards,
     
    ken

  •  07-12-2010, 6:22 AM 62422 in reply to 62407

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    The problem I have with the above approach is that it assumes the editor is always read-only on the page. This page switches between r/w and r/o depending on the document state in our workflow. I'll see if I can adapt the above to turn the scroll on and off when the document state switches.
     
    One thing I'd like clarification on: In the <CE:Editor ID="editor1" runat="server" >  tag you ID the editor as Editor1, but in the script you refer to function CuteEditor_OnInitialized(editor). Should the script be referencing the .Net ClientID of Editor1 or will your code work as written?
     
    Thanks.

  •  07-12-2010, 8:34 PM 62441 in reply to 62422

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi Richard Schaefer,
     
    In method "CuteEditor_OnInitialized", editor will as a parameter. You can use it directly.
     
    Below it an example to show you how to switche the scroll bar state between on and off.
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    5. <html xmlns="http://www.w3.org/1999/xhtml">   
    6. <head id="Head1" runat="server">   
    7.     <title>Untitled Page</title>   
    8. </head>   
    9. <body>   
    10.     <form id="form1" runat="server">   
    11.         <CE:Editor ID="editor1" runat="server">   
    12.         </CE:Editor>   
    13.         <input type="button" value="scroll on" onclick="scrollOn()" />   
    14.         <input type="button" value="scroll off" onclick="scrollOff()" />   
    15.     </form>   
    16. </body>   
    17. </html>   
    18.   
    19. <script>      
    20. function CuteEditor_OnInitialized(editor)      
    21. {      
    22.     var editdoc = editor.GetDocument();      
    23.     //editdoc.body.scroll="no"; firefox does not support scroll      
    24.     editdoc.body.style.overflow="hidden";      
    25. }      
    26. function scrollOn()   
    27. {   
    28.     var editor1 = document.getElementById("<%= editor1.ClientID %>");   
    29.     var editdoc = editor1.GetDocument();    
    30.     editdoc.body.style.overflow="";    
    31. }   
    32. function scrollOff()   
    33. {   
    34.     var editor1 = document.getElementById("<%= editor1.ClientID %>");   
    35.     var editdoc = editor1.GetDocument();    
    36.     editdoc.body.style.overflow="hidden";    
    37. }   
    38. </script>  

    Regards,
     
    Ken

  •  07-13-2010, 5:57 AM 62449 in reply to 62441

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    I figured it was ClientID. Thanks.
     
    One more question: Is there any way to accomplish the same thing server-side? It would help in some cases where the editor state is changing as part of a partial post-back.

  •  07-13-2010, 10:26 PM 62463 in reply to 62449

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi Richard Schaefer,
     
    Below is the server side example
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>   
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    5.   
    6. <script runat="server">   
    7.     protected void show_Click(object sender, EventArgs e)   
    8.     {   
    9.         //you can put state.Value = "on"; in any server side method you need   
    10.         state.Value = "on";   
    11.     }   
    12.   
    13.     protected void hide_Click(object sender, EventArgs e)   
    14.     {   
    15.         //you can put state.Value = "off"; in any server side method you need   
    16.         state.Value = "off";   
    17.     }   
    18.   
    19. </script>   
    20.   
    21. <html xmlns="http://www.w3.org/1999/xhtml">   
    22. <head id="Head1" runat="server">   
    23.     <title>Untitled Page</title>   
    24. </head>   
    25. <body>   
    26.     <form id="form1" runat="server">   
    27.         <asp:HiddenField ID="state" runat="server" />   
    28.         <CE:Editor ID="editor1" runat="server">   
    29.         </CE:Editor>   
    30.         <asp:Button ID="show" runat="server" Text="show scroll bar" OnClick="show_Click" />   
    31.         <asp:Button ID="hide" runat="server" Text="hide scroll bar" OnClick="hide_Click" />   
    32.     </form>   
    33. </body>   
    34. </html>   
    35.   
    36. <script>         
    37. function CuteEditor_OnInitialized(editor)         
    38. {      
    39.     var state=document.getElementById("<%= state.ClientID %>");   
    40.     switch(state.value)   
    41.     {   
    42.         case "":   
    43.         scrollOff();   
    44.         break;   
    45.         case "on":   
    46.         scrollOn();    
    47.         break;   
    48.         case "off":   
    49.         scrollOff();    
    50.         break;   
    51.     }   
    52.        
    53. }         
    54. function scrollOn()      
    55. {      
    56.     var editor1 = document.getElementById("<%= editor1.ClientID %>");      
    57.     var editdoc = editor1.GetDocument();       
    58.     editdoc.body.style.overflow="";       
    59. }      
    60. function scrollOff()      
    61. {      
    62.     var editor1 = document.getElementById("<%= editor1.ClientID %>");      
    63.     var editdoc = editor1.GetDocument();       
    64.     editdoc.body.style.overflow="hidden";       
    65. }      
    66. </script>  
    Regards,
     
    Ken

  •  07-14-2010, 6:28 AM 62477 in reply to 62463

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    This looks like what I need. I'll give it a try in the next day or so and update the thread.
     
    Thanks.

  •  07-14-2010, 7:32 AM 62481 in reply to 62463

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    I can't figure out how to implement this in the page I have as coded. I added the scrollOn and scrollOff JS functions. I tried to put:
     
    state.Value="Off" into my  SetPageAsReadOnly() method in the Item.aspx.cs file I sent you. It doesn't know what "state" is. I tried Editor1.state and it doesn't recognize that either.
     
    Can you look at the code I attached previously and advise?

  •  11-08-2011, 4:07 PM 71234 in reply to 62333

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Good question! I also am in need  of this solution.
     
    My users will be working in a predefined width and height and the scroll bars must not affect this working work area.
     
    I'm using Classic ASP... how can I disable the scrollbars?

  •  11-09-2011, 6:34 AM 71280 in reply to 71234

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi WilliamK,
     
    Please try the example below. It is the classic asp example
     
    <!-- #include file = "cuteeditor_files/include_CuteEditor.asp" -->
    <html>
    <head>
        <title>ASP Editor Demo</title>
    </head>
    <body>
        <form name="theForm" method="post">
            <div>
                <%   
           Dim editor   
           Set editor = New CuteEditor   
           editor.ID = "Editor1"  
           editor.Text = "Hello World"  
           editor.EditCompleteDocument=true
           editor.Draw()   
                %>
            </div>
              <input type="button" value="scroll on" onclick="scrollOn()" />
            <input type="button" value="scroll off" onclick="scrollOff()" />
        </form>
    </body>
    </html>

    <script>
       function CuteEditor_OnInitialized(editor)      

          {      

              var editdoc = editor.GetDocument();      

              //editdoc.body.scroll="no"; firefox does not support scroll      

              editdoc.body.style.overflow="hidden";      

          }      

          function scrollOn()   

          {   

             var editor1 = document.getElementById('CE_Editor1_ID');

              var editdoc = editor1.GetDocument();    

              editdoc.body.style.overflow="";    

          }   

          function scrollOff()   

          {   

              var editor1 = document.getElementById('CE_Editor1_ID');
     
              var editdoc = editor1.GetDocument();    

              editdoc.body.style.overflow="hidden";    

          }   
    </script>
     
    Regards,
     
    Ken

  •  11-09-2011, 5:36 PM 71304 in reply to 71280

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    I seem to have a conflict with another script already on the page (see below). Also, is there a reason for placing the JavaScript at the bottom of the html and not between the HEAD tags?
     
    <!-- #include file = "cuteeditor_files/include_CuteEditor.asp" -->
    <html>
    <head>
        <title>ASP Editor Demo</title>

    <script>

    function CuteEditor_OnInitialized(editor)
    {
        var editor1 = document.getElementById('CE_Editor1_ID');
        var editdoc = editor1.GetDocument();
        //set border when editor load
        editdoc.body.style.border="solid 1px red";
    }

    function getBorder()
    {
       var editor1 = document.getElementById('CE_Editor1_ID');
       var editdoc = editor1.GetDocument();
       //get border
       alert(editdoc.body.style.border);
    }     

    function scrollOff()   
    {   
        var editor1 = document.getElementById('CE_Editor1_ID');
        var editdoc = editor1.GetDocument();    
        editdoc.body.style.overflow="hidden";    
    }    
          
    </script>

    </head>
    <body bgcolor="#FFFFFF" onLoad="scrollOff();">

        <form name="theForm" method="post">
            <div>
                <%   
           Dim editor   
           Set editor = New CuteEditor   
           editor.ID = "Editor1"  
           editor.Text = "Hello World"  
           editor.EditCompleteDocument=true
           editor.Draw()   
                %>
            </div>
        </form>
    </body>
    </html>
     

  •  11-10-2011, 6:35 AM 71311 in reply to 71304

    Re: Any way to suppress the scroll bars in the Editor?

    Reply Quote
    Hi WilliamK ,
     
    The editor API I suggest you put it after the editor. And others, you can deploy to anywhere you want.
     
    Regards,
     
    Ken
View as RSS news feed in XML