Support forums - auto sizing

Support forums » Products » Cute Editor for .NET » Re: auto sizing

auto sizing

Last post 10-06-2009, 3:51 PM by chuck7. 6 replies.


	Sort Posts: Previous Next

09-14-2009, 10:52 PM 55632

chuck123
Joined on 09-15-2009
Posts 2

auto sizing

Reply Quote

We have several cute editors on a page. Some of them stand alone some and some are in a repeater control. We want them all to expand to the correct size to display all the text (no scroll bars). Unfortunately, some of the editors are collapsing to one line and have a vertical scroll bar. All of the editors are configured the same. How can we fix this?

09-15-2009, 12:40 AM 55635 in reply to 55632

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

Re: auto sizing

Reply Quote

HI chuck123,

Please try this 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<CE:Editor ID="editor1" runat="server">
</CE:Editor>
</div>
</form>
</body>
</html>
<script type="text/javascript">
setInterval("refreshTime()",1000);
function refreshTime()
{
var editor=document.getElementById('<%= editor1.ClientID%>');
var w=editor.GetDocument().body.scrollWidth;
if(w<760)w=760;
editor.style.width=w+10+"px";
}
</script>

Regards,

Ken

09-15-2009, 11:33 AM 55656 in reply to 55635

chuck7
Joined on 08-31-2009
Posts 12

Re: auto sizing

Reply Quote

Looks like a normal editor, about 15-20 rows shown, gets 10px wider every second.

09-15-2009, 11:48 AM 55657 in reply to 55635

toniemtz
Joined on 09-15-2009
Posts 12

Re: auto sizing

Reply Quote

The situation is the resizemode = autoadjust is intermittently failing.

We have implemented multiple editors with a default height specified as well as the ResizeMode="AutoAdjust". The Default Height when defined alone will always be implemented and behaves as expected. When you introduce the ResizeMode="AutoAdjust" some controls will be a single line and others will take the default height. When a refresh is selected in the browser or the page is reloaded at times the AutoAdjust will be implemented and at times it will not.

09-15-2009, 3:17 PM 55662 in reply to 55657

toniemtz
Joined on 09-15-2009
Posts 12

Re: auto sizing

Reply Quote

After some testing it appears the editor may not like being wrapped within a table. The following code when first entering the page will show the problem we are experiencing. However, if we continue to refresh the page the text boxes will suddenly begin to autoadjust.

<!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 xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <table>
        <tr>

                <td align="top">
                <div style="margin-right: 15px;">
                    <CE:Editor ID="Editor1" runat="server" />
                    <table>
                    <tr>
                    <td><CE:Editor ID="Editor2" runat="server" /></td>
                    <td><CE:Editor ID="Editor3" runat="server" /></td>
                    </tr>
                    </table>


                    <CE:Editor ID="Editor4" runat="server" />
                    <CE:Editor ID="Editor5" runat="server" />
                    <CE:Editor ID="Editor6" runat="server" />
                    <CE:Editor ID="Editor7" runat="server" />
                    <CE:Editor ID="Editor8" runat="server" />
                    <CE:Editor ID="Editor9" runat="server" />
                    <CE:Editor ID="Editor10" runat="server" />
                </div></td>
                </tr>
                </table>
        <asp:Button ID="btnDisplay" runat="server" Text="Display"
            onclick="btnDisplay_Click" />
        <asp:Button ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />

    </form>
</body>
</html>

09-15-2009, 4:01 PM 55665 in reply to 55662

toniemtz
Joined on 09-15-2009
Posts 12

Re: auto sizing

Reply Quote

An example using Cutesoft example on Auto Adjusting Height to show our issue...

<%@ Page Language="C#"%>
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<html>
    <head>
        <title>ASP and ASP.NET WYSIWYG Editor - Editor Auto Adjusting Height</title>
        <link rel="stylesheet" href="example.css" type="text/css" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <table cellpadding="15">
                <tr>
                    <td id="leftcolumn" width="160">

                    </td>
                    <td>
                        <h1>Editor Auto Adjusting Height</h1>
                        This example shows how to use Editor.ResizeMode to make the Editor change it's height based on the content.
                        The Editor will now grow and shrink in height to match the content inside.
                        <br />
                        <asp:radiobuttonlist id="ResizeList" runat="server" autopostback="True" RepeatDirection="Horizontal" onselectedindexchanged="theme_Changed">
                            <asp:ListItem value="AutoAdjust" Selected="True">AutoAdjust</asp:ListItem>
                            <asp:ListItem value="ResizeCorner">ResizeCorner</asp:ListItem>
                            <asp:ListItem value="PlusMinus">PlusMinus</asp:ListItem>
                            <asp:ListItem value="None">None</asp:ListItem>
                        </asp:radiobuttonlist>
                        <CE:Editor id="Editor1" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br />
                        <table><tr><td><CE:Editor id="Editor2" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br /></td>
                        <td><CE:Editor id="Editor3" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br /></td></tr></table>


                        <CE:Editor id="Editor4" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br />
                        <CE:Editor id="Editor5" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br />
                        <CE:Editor id="Editor6" EditorWysiwygModeCss="example.css" AutoConfigure="Simple" Height="200" ResizeMode="AutoAdjust" ThemeType="Office2007" runat="server"/> <br />


                        <asp:Button id="btnUpdate" onclick="Submit" Runat="server" Text="Submit"></asp:Button>
                        <asp:Literal ID="Literal1" Runat="server" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

<script runat="server">
    void Page_Load(object sender, System.EventArgs e)
     {
        if (IsPostBack)
        {
            Literal1.Text = "<h2>The HTML you typed is...</h2><br>";
            Literal1.Text += Server.HtmlEncode(Editor1.XHTML);
        }
        else
        {
            Editor1.Text = "This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>";
        }

    }
    public void Submit(object sender, System.EventArgs e)
    {
        Literal1.Text = "<h2>The HTML you typed is...</h2><br>";
        Literal1.Text += Server.HtmlEncode(Editor1.XHTML);
    }

    private void theme_Changed(Object sender, EventArgs e)
    {
        switch(ResizeList.SelectedItem.Value)
        {
            case "AutoAdjust":
                Editor1.ResizeMode = EditorResizeMode.AutoAdjust;
                Editor1.Text = "Editor1.ResizeMode = EditorResizeMode.AutoAdjust;";
                break;
            case "ResizeCorner":
                Editor1.ResizeMode = EditorResizeMode.ResizeCorner;
                Editor1.Text = "Editor1.ResizeMode = EditorResizeMode.ResizeCorner;";
                break;
            case "PlusMinus":
                Editor1.ResizeMode = EditorResizeMode.PlusMinus;
                Editor1.Text = "Editor1.ResizeMode = EditorResizeMode.PlusMinus;";
                break;
            case "None":
                Editor1.ResizeMode = EditorResizeMode.None;
                Editor1.Text = "Editor1.ResizeMode = EditorResizeMode.None;";
                break;
        }
        Editor1.Visible = true;

    }
</script>

10-06-2009, 3:51 PM 56144 in reply to 55635

chuck7
Joined on 08-31-2009
Posts 12

Re: auto sizing

Reply Quote

Any update on getting the autosizing to work?