Support forums - Sizing and resizing bugs in the cuteeditor

Support forums » Products » Cute Editor for .NET » Re: Sizing and resizing bugs in the cuteeditor

Sizing and resizing bugs in the cuteeditor

Last post 08-30-2007, 2:32 PM by Adam. 9 replies.


	Sort Posts: Previous Next

07-25-2007, 11:54 AM 31858

mikea
Joined on 01-11-2006
Posts 21

Sizing and resizing bugs in the cuteeditor

Reply Quote

Create this simple page below and see how the cuteedit does not size itself correctly in either firefox or ie7.

Then remove the doctype tag and see what happens...

I've been trying for several long days now to get cuteedit to resize w/ the browser window when I came upon this issue which seems to be causing some of the root problem.

I'm about ready to give up and concede that cuteedit is only happy when given fixed sizes at design-time. Not a great user experience...

Is this true?

I've tried wrapping cuteedit in div tags, tried absolute, relative, and static positioning, etc...

It just ignores the 100% and creates its own (small) sizes.

I'm running out of gin to get me through this in one piece.

I'm considering going back to 5.3 but I was hoping to get better firefox support w/ 6.0. So far, not so good..

Anyone else have this problem - know a work around (other than removing doctype)?

Thanks all for any help.

-Michael

<%@ Page Language="vb" AutoEventWireup="false"%>

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

<%@ Register TagPrefix="ce" Namespace="CuteEditor" Assembly="CuteEditor" %>

<title>Untitled Page</title>

</head>

<body>

<ce:Editor ID="ctlCuteEditor" Height="100%" Width="100%" runat="server" DOCTYPE>

<FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"

Height="100%" Width="100%"></FrameStyle>

</ce:Editor>

</form>

</body>

</html>

07-25-2007, 4:42 PM 31886 in reply to 31858

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

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

mikea,

When you use

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

and height 100%, the parent node of the current element must have a value.

Try the following HTML code:

Case 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
    </head>
    <body bgcolor="#979080" marginheight="0" marginwidth="0">
        <table height="100%" width="100%" bgcolor="white" border="0">
            <tbody>
                <tr>
                    <td valign="middle">
                    <div align="center">Hello World; </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Then remove <!DOCTYPE ...>, it should work.

Case 2:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
    </head>
    <body bgcolor="#979080" marginheight="0" marginwidth="0">
        <table height="100%" width="100%" bgcolor="white" border="0">
            <tbody>
                <tr>
                    <td valign="middle">
                    <div align="center">Hello World; </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Solution:

However without the DOCTYPE the browser will start attempting to emulate buggy behaviours of old browsers.

To make this work in standards compliant mode you need to ensure you've set a height for all the ancestors of your element (in the case of this page that's the body and html elements). To do this you can add the following:

Case 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
       <style type="text/css">
            html, body {
            height: 100%;
          margin: 0; padding: 0;
        }
    </style>
    </head>
    <body bgcolor="#979080" marginheight="0" marginwidth="0">
        <table height="100%" width="100%" bgcolor="white" border="0">
            <tbody>
                <tr>
                    <td valign="middle">
                    <div align="center">Hello World; </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</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

07-25-2007, 5:00 PM 31891 in reply to 31886

mikea
Joined on 01-11-2006
Posts 21

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

Thanks Adam. I tried that. Now replace hello world with this CE tag:

<ce:Editor ID="ctlCuteEditor" Height="100%" Width="100%" runat="server" >

<FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"

Height="100%" Width="100%"></FrameStyle>

</ce:Editor>

Check it out in firefox. You should see what I'm talking about - it doesn't fill the window - unless you remove doctype - which is not an option.

07-25-2007, 5:07 PM 31892 in reply to 31891

mikea
Joined on 01-11-2006
Posts 21

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

OK - I removed the containing div in the cell (since it didn't specify a height) and got a little farther - editor fills the table cell which fills the window - however - resizing the window does not resize the editor - on firefox - looks like the editor is sized by your load script and never re-adjusted on window resize?

07-25-2007, 5:29 PM 31895 in reply to 31892

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

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

Please use the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEST</title>
       <style type="text/css">
            html, body {
            height: 100%;
            margin: 0; padding: 0;
        }
    </style>
    </head>
    <body bgcolor="#979080" marginheight="0" marginwidth="0">
        <CE:Editor id="Editor1" Width="100%" Height="100%" runat="server"></CE:Editor>
    </body>
</html>

Another solution is set Editor.FullPage property to true and let Cute Editor do it for you.

07-26-2007, 8:19 AM 31909 in reply to 31895

mikea
Joined on 01-11-2006
Posts 21

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

Thanks - still not working. Are you testing w/ firefox? The page you gave we loads the first time correctly filling the browser window - but subsequently resizing the browser does resize the editor.

07-26-2007, 8:54 AM 31911 in reply to 31909

mikea
Joined on 01-11-2006
Posts 21

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

If it helps, you've definitely got some js running in your gecko implementation that is setting the height style to an explicit px size - as part of the page load/editor initialize. Using firefox/firebug you can see the editors height style get set to a fixed px after a page load. Resize the browser and refresh the page - see how the editor gets a new "hardcoded" px size. This initial sizing code is not being run on window resize events.

Also your latest page snippet is not correctly filling the IE7 browser - I'm getting vertical scroll bars (about 20% of the editor is below the window).

07-26-2007, 1:21 PM 31921 in reply to 31911

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

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

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

08-30-2007, 7:37 AM 33089 in reply to 31921

mikea
Joined on 01-11-2006
Posts 21

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

for full-window rendering that works - but I need it to resize w/in a container - I have other things on the page.

I'm assuming at this point its not possible and have moved on.

Did I see in another post that you guys were working on a "public" javascript method for resizing?

08-30-2007, 2:32 PM 33107 in reply to 33089

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

Re: Sizing and resizing bugs in the cuteeditor

Reply Quote

>>for full-window rendering that works - but I need it to resize w/in a container - I have other things on the page.

Can you create a simple page showing the problem?