Make the editor vertically and horizontally stretched in the page

Last post 08-03-2010, 10:34 AM by Adam. 16 replies.
Sort Posts: Previous Next
  •  07-20-2010, 4:53 AM 62597

    Make the editor vertically and horizontally stretched in the page

    Hello,
     
    I am currently evaluating your product.
    I am trying to make the editor stretch 100% in the page both vertically and horizontally.
    I have a simple web form in which i put the editor.

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

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <style type="text/css">  
    html, body, form{ height: 100%;}   
    </style>  
    </head>  
    </head>
    <body style="margin:0px">
        <form id="form1" runat="server" >
     <CE:Editor ID="Editor1" runat="server"
                    ConfigurationPath="~/cuteeditor.config"
                    ActiveTab="View"
                    ResizeMode="None"
                    ShowWordCount="False"
                    Height="100%" Width="100%">
                </CE:Editor>
        </form>
    </body>
    </html>
     
    It doesn't work.  Switching between the tabs make it even worse.
    Can you please help me how make the editor look stretched?
     
    Thanks!
    Mike.
  •  07-20-2010, 9:21 AM 62629 in reply to 62597

    Re: Make the editor vertically and horizontally stretched in the page

  •  07-27-2010, 5:04 PM 62750 in reply to 62629

    Re: Make the editor vertically and horizontally stretched in the page

    Hi Adam!
     
    Thanks for help, but it doesn't work.
    It makes the tab buttons go down out of the window so they are not visible anymore...
     
    Any idea or example of this working?
     
    Thanks!
  •  07-27-2010, 5:31 PM 62753 in reply to 62750

    Re: Make the editor vertically and horizontally stretched in the page

    Mikenas,
     
    the problem you are reporting sounds very similar to what some of my users are experiencing. Some buttons are half-way off the screen. What makes this situation difficult to investigate is that no all my users are experiencing it. For some people the editor is maximized as expected but for other people the buttons at the bottom of the editor are almost completely off the screen (I posted a screenshot in my post, it would be interresting to know if your situation is similar). 
  •  07-27-2010, 6:16 PM 62754 in reply to 62753

    Re: Make the editor vertically and horizontally stretched in the page

    I tested your code, change: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Page Language="C#" validateRequest="false" %>
    <%@ Register TagPrefix="cutesoft" TagName="banner" Src="banner.ascx" %>
    <%@ Register TagPrefix="cutesoft" TagName="leftmenu" Src="leftmenu.ascx" %>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <style type="text/css"> 
    html, body, form{ height: 100%;}  
    </style> 
    </head> 
    </head>
    <body style="margin:0px">
        <form id="form1" runat="server" >
     <CE:Editor ID="Editor1" runat="server"
                    ActiveTab="View"                
                    ShowWordCount="False"
                    Height="88%" Width="88%">
                </CE:Editor>
        </form>
    </body>
    </html>
     to: 

    <%@ Page Language="C#" validateRequest="false" %>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
    <head runat="server">
        <title></title> 
    </head> 
    </head>
        <form id="form1" runat="server" >
     <CE:Editor ID="Editor1" runat="server"
                    ActiveTab="View"                
                    ShowWordCount="False"
                    FullPage="True">
                </CE:Editor>
        </form>
    </body>
    </html>

    html, body, form{ height: 100%;}  
    and
    <body style="margin:0px">, these two styles setting lead to this issue.
     
    Regards,
    Eric

  •  07-28-2010, 4:27 AM 62767 in reply to 62754

    Re: Make the editor vertically and horizontally stretched in the page

    Eric,
     
    I created a test page with exactly the HTML code you suggested in your last post
     
     
    Switching the tabs makes the tab buttons go off window.
     
    IE 8: works
     
    For the following browsers however, the error appears as soon as you switch any tab
    FireFox 3.6.8
    Chrome 5.0.375.125
     
    Stretching the editor is very important to me.
     
    Thanks.
  •  07-28-2010, 9:36 PM 62789 in reply to 62767

    Re: Make the editor vertically and horizontally stretched in the page

    Hi Mikenas,
     
    Another example
     
    1. <%@ Page Language="C#" %>   
    2.   
    3. <%@ Register Namespace="CuteEditor" Assembly="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 override void OnLoad(EventArgs e)   
    8.     {   
    9.         editor1.ResizeMode = CuteEditor.EditorResizeMode.AutoAdjust;   
    10.         base.OnLoad(e);   
    11.     }   
    12.       
    13. </script>   
    14.   
    15. <html xmlns="http://www.w3.org/1999/xhtml">   
    16. <head id="Head1" runat="server">   
    17.     <title>Untitled Page</title>   
    18.     <style type="text/css">     
    19. html, body, form{ height: 100%;}      
    20. </style>     
    21.   
    22. </head>   
    23. <body>   
    24.     <form id="form1" runat="server">   
    25.         <div>   
    26.             <CE:Editor ID="editor1" runat="server" Width="100%">   
    27.             </CE:Editor>   
    28.         </div>   
    29.     </form>   
    30. </body>   
    31. </html>   
    32.   
    33. <script type="text/javascript">   
    34. setInterval("refreshTime()",500);   
    35.   
    36. function refreshTime()   
    37. {   
    38. var editor=document.getElementById('<%= editor1.ClientID%>');   
    39.   
    40. var h=editor.GetDocument().body.scrollHeight;   
    41.   
    42. editor.style.height=document.body.scrollHeight-30+"px";   
    43. }   
    44. </script>  
    Regards,
     
    ken
  •  07-29-2010, 11:28 AM 62802 in reply to 62789

    Re: Make the editor vertically and horizontally stretched in the page

    I don't understand.
    Previously, Eric said FullPage should do it.
     
    Now I see there is some tweaking code needed.
    Isn't any official way to handle this?
     
    Thanks
  •  07-29-2010, 12:28 PM 62804 in reply to 62802

    Re: Make the editor vertically and horizontally stretched in the page

    Ken,
     
    I updated the  page with your code
     
    It doesn't work correctly.
     
    What's the magic behind 
    http://cutesoft.net/example/FullScreen.aspx
    which make this to work?
     
     
  •  07-29-2010, 9:49 PM 62811 in reply to 62804

    Re: Make the editor vertically and horizontally stretched in the page

    Hi Mikenas,
     
    I got some javascript errors on your page.
     
    Can you set up ftp access for me? I will create the example for you.
     
    Please send the info to Kenneth@CuteSoft.net
     
    Regards,
     
    Ken
  •  07-30-2010, 6:31 AM 62822 in reply to 62804

    Re: Make the editor vertically and horizontally stretched in the page

    Mikenas:
    Ken,
     
    I updated the  page with your code
     
    It doesn't work correctly.
     
    What's the magic behind 
    http://cutesoft.net/example/FullScreen.aspx
    which make this to work?
     
     
     
    In that example, Editor.FullPage Property  is set to true.
     
    Demo:
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  07-30-2010, 9:13 AM 62828 in reply to 62822

    Re: Make the editor vertically and horizontally stretched in the page

    Hi Adam,
    In my initial test, I was only using that property but it didn't work.
    I used a simple example, just the control and the property set to true.
     
    Here;s the page which contains a simple code:
     <%@ Page Language="C#" %>   
     <%@ Register Namespace="CuteEditor" Assembly="CuteEditor" TagPrefix="CE" %>   
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
      
     <html xmlns="http://www.w3.org/1999/xhtml">   
     <head id="Head1" runat="server">   
         <title>Untitled Page</title>   
     </head>   
     <body>   
         <form id="form1" runat="server">   
             <div>   
                 <CE:Editor ID="editor1" runat="server" FullPage="True"/>
             </div>   
         </form>   
     </body>   
     </html>  
     
     
     
    Can  you please post the exact HTML code from your FullScreen.aspx ?
     
    Thank you.
  •  07-30-2010, 9:26 AM 62829 in reply to 62828

    Re: Make the editor vertically and horizontally stretched in the page

    This example source code can be found in http://richtextbox.com/test/CuteEditorTest.zip, after you download and unzip it, search "fullpage.aspx", you will find it.
     
    Regards,
    Eric
  •  07-30-2010, 9:37 AM 62831 in reply to 62829

    Re: Make the editor vertically and horizontally stretched in the page

    You clearly have a bug in the FullPage feature.
     
    I created another test page with the FullScreen.aspx from the demo.
    It seems like it works OK when using F12 during runtime.
    However, it doesn't work if FullPage is set to true in code.
     
    Please check the page.
     
    Any ideas how to make this work?
     
    Thanks!
  •  07-30-2010, 9:39 AM 62832 in reply to 62831

    Re: Make the editor vertically and horizontally stretched in the page

    There are side effects when setting FullPage in code.
    When switching between the editor's tabs in FireFox, the editor's textbox changes in height.
     
  •  07-30-2010, 10:07 AM 62834 in reply to 62832

    Re: Make the editor vertically and horizontally stretched in the page

    I thought initially that the problem with FullPage property is only when setting it at design time.
    I thought it works OK if you set it during run-time but I am wrong.
     
    http://www.opcodeservices.com/TestWebApp/WebForm11.aspx
    It's the same code from FullScreen example which comes with the demo
     
    I only changed the event from the 'Show HTML' Button to make the editor go full screen.
     
    As you can see, clicking the button makes the editor go full screen and work correctly in IE when resizing the window and switching tabs.
     
    On Firefox and Chome however, it doesn't.
    What's weird is that it starts working as soon as you do a switch by using F12.
    So there's something in the code on pressing full screen shortcut which makes the editor work correctly.
     
    I really need this done as soon as possible because I already lost incredibly a lot of time for this issue
    I need to develop a proof of concept  which proves your solution works in our scenario, in order to buy your solution.
     
    THanks!
     
     
  •  08-03-2010, 10:34 AM 63023 in reply to 62834

    Re: Make the editor vertically and horizontally stretched in the page

    Mikenas,
     
    Can you create a new aspx page with the following code then try again?
     
    keep me posted
    1. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>  
    2. <%@ Page language="c#"%>  
    3. <html>  
    4.     <head>  
    5.     </head>  
    6.     <body>  
    7.         <form id="Form1" method="post" runat="server">  
    8.             <CE:EDITOR id="Editor1" Autoconfigure="Simple" FullPage="true" runat="server"></CE:EDITOR>  
    9.         </form>  
    10.     </body>  
    11. </html>  

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

View as RSS news feed in XML