Support forums - Make the editor vertically and horizontally stretched in the page

Support forums » Products » Cute Editor for .NET » Re: Make the editor vertically and horizontally stretched in the page

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

Mikenas
Joined on 07-20-2010
Posts 13

Make the editor vertically and horizontally stretched in the page

Reply Quote

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

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

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

Reply Quote

Mike,

Please use Editor.FullPage Property.

Demo:

http://richtextbox.com/test/FullPage.aspx

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-27-2010, 5:04 PM 62750 in reply to 62629

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

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

frJericho
Joined on 05-02-2010
Posts 169

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

Reply Quote

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

Eric
Joined on 08-05-2009
Posts 1,269

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

Reply Quote

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

Eric,

I created a test page with exactly the HTML code you suggested in your last post

http://www.opcodeservices.com/TestWebApp/Default1.aspx

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

Kenneth
Joined on 02-13-2008
Posts 3,886

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

Reply Quote

Hi Mikenas,

Another example

<%@ 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">
<script runat="server">
protected override void OnLoad(EventArgs e)
{
editor1.ResizeMode = CuteEditor.EditorResizeMode.AutoAdjust;
base.OnLoad(e);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body, form{ height: 100%;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<CE:Editor ID="editor1" runat="server" Width="100%">
</CE:Editor>
</div>
</form>
</body>
</html>
<script type="text/javascript">
setInterval("refreshTime()",500);
function refreshTime()
{
var editor=document.getElementById('<%= editor1.ClientID%>');
var h=editor.GetDocument().body.scrollHeight;
editor.style.height=document.body.scrollHeight-30+"px";
}
</script>

Regards,

ken

07-29-2010, 11:28 AM 62802 in reply to 62789

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

Ken,

I updated the page with your code

http://www.opcodeservices.com/TestWebApp/Default1.aspx

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

Kenneth
Joined on 02-13-2008
Posts 3,886

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

Reply Quote

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 [email protected]

Regards,

Ken

07-30-2010, 6:31 AM 62822 in reply to 62804

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

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

Reply Quote

Mikenas:

Ken,

I updated the page with your code

http://www.opcodeservices.com/TestWebApp/Default1.aspx

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:

http://richtextbox.com/test/FullPage.aspx

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

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:

http://www.opcodeservices.com/TestWebApp/FullSCreen.aspx

<%@ 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

Eric
Joined on 08-05-2009
Posts 1,269

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

Reply Quote

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

You clearly have a bug in the FullPage feature.

I created another test page with the FullScreen.aspx from the demo.

http://www.opcodeservices.com/TestWebApp/FullScreen2.aspx

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

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

Mikenas
Joined on 07-20-2010
Posts 13

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

Reply Quote

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

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

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

Reply Quote

Mikenas,

Can you create a new aspx page with the following code then try again?

keep me posted

<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<%@ Page language="c#"%>
<html>
<head>
</head>
<body>
<form id="Form1" method="post" runat="server">
<CE:EDITOR id="Editor1" Autoconfigure="Simple" FullPage="true" runat="server"></CE:EDITOR>
</form>
</body>
</html>