Cute editor not loading properly in jquery pop-up with Chrome

Last post 01-12-2012, 6:06 AM by Kenneth. 12 replies.
Sort Posts: Previous Next
  •  01-06-2012, 3:55 AM 72524

    Cute editor not loading properly in jquery pop-up with Chrome

    Hello,
     
    I am using cute editor in my application. It works fine in all places in almost all browsers. Now I had place the cute editor in jquery pop-up and found that the content area of editor is not visible in the pop-up in Chrome .
     
    This works fine in IE but in chrome the editor is not loading properly. I need this to be done, this is urgent please.
     
    Thanks in advance. 
  •  01-06-2012, 11:02 PM 72534 in reply to 72524

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    nrsharma,
     
    Can you create a simple example showing how you load the editor? 

    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

  •  01-07-2012, 12:52 AM 72539 in reply to 72534

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hello Adam,
     
    Please see the example here http://www.hrgp.biz/TestEditor.aspx (try this in both IE and chrome). Please note that at our local development environment  this is not working at all (the content area is not visible). I had seen at the above url that content area of editor is visible sometime, so you need to test it by hit and try.
     
    The code which I had used is as follows:
    Head Section have
    <head runat="server">
        <title></title>
        <style type="text/css">
            .apple_overlay
            {
                width: 100%;
                height: 100%;
                background: #fff;
                border: 2px solid #333;
                position: absolute;
                z-index: 3000;
                display: none;
            }
            
            .headrow
            {
                background: gray;
                color: White;
                height: 20px;
                margin-bottom: 10px;
                padding-top: 5px;
                font-weight: bold;
            }
            .close
            {
                cursor: pointer;
            }
        </style>
        <script src="HRGPScripts/jquery-1.5.js" type="text/javascript"></script>
        <%--Script for jquery Pop-up--%>
        <script src="include/HRGPScripts/jquery.tools.min.full.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            function OpenAddGoalPopUp() {
                $('#aAddGoal').overlay({ mask: { color: '#000', effect: 'apple' }, closeOnClick: false, load: true });
            }
        </script>
    </head>
     
    and the popup section is
    <a id="aAddGoal" rel='#divGoal' runat="server" class="Links" onclick="OpenAddGoalPopUp();">
            Open PopUp</a>
        <div class="apple_overlay" id="divGoal" style="width: 870px; height: auto;">
            <div class="headrow">
                <span id="spAddGoalTitle" style="padding-left: 10px;"></span><a class="close" style="background-image: url(../include/images/close.png);
                    position: absolute; right: 0%; top: 0%; margin: 0px; z-index: 10%; height: 35px;
                    width: 35px;" onclick="$('#divGoal').hide();"></a>
            </div>
            <div id="divGoalContent" style="padding-left: 10px;">
                <table border="0" cellpadding="0" cellspacing="0" style="padding-left: 6px;">
                    <tr>
                        <td valign="top" align="left" style="padding-bottom: 5px; font-size: 12px;">
                            <b>Description</b>
                        </td>
                        <td style="padding-bottom: 5px;">
                            <CE:Editor ID="CEDescription" runat="server" AutoConfigure="Simple" AllowPasteHtml="true"
                                UseStandardDialog="true" CssClass="inputBox" Width="310px" Height="150px" ResizeMode="None"
                                ShowHtmlMode="false" ShowBottomBar="false" EnableStripScriptTags="false" TemplateItemList="bold, Italic, underline,JustifyLeft,JustifyCenter,JustifyRight,forecolor,backcolor,InsertOrderedList,InsertUnorderedList,NetSpell,InsertLink,Unlink" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
     
     Thanks
     
  •  01-09-2012, 12:01 AM 72550 in reply to 72539

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    I got the same issue in modal pop which is written by pure js
    It seems that the editor size behaves differently in differnt web browsers. mainly the difference between IE and all other W3C standard browsers I guess.
    after the editor initialized, if you hide the editor and display it again, the browser's size will be funny.
    this actually is known issue that I raised long long ago and has never been addressed. 
  •  01-09-2012, 11:08 AM 72569 in reply to 72550

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi wolf11th,
     
    Can you create an example page which can reproduce this issue and send it to Kenneth@CuteSoft.net? We will check it and get back to you as soon as possible.
     
    Regards,
     
    Ken 
  •  01-10-2012, 4:08 AM 72583 in reply to 72569

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hello Ken,
     
    You can  have a look here http://www.hrgp.biz/TestEditor.aspx . Please click on "Open Popup" link and see what is happening (click again if you won't able to reproduce it). Please update me as this is urgent.
     
    Thanks
     
  •  01-10-2012, 6:42 AM 72584 in reply to 72583

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi nrsharma,
     
    Please try the example below, I moved the display: none; into the div target.
     
    <%@ 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></title>
        <style type="text/css">
            .apple_overlay
            {
                width: 100%;
                height: 100%;
                background: #fff;
                border: 2px solid #333;
                position: absolute;
                z-index: 3000;
             }
            
            .headrow
            {
                background: gray;
                color: White;
                height: 20px;
                margin-bottom: 10px;
                padding-top: 5px;
                font-weight: bold;
            }
            .close
            {
                cursor: pointer;
            }
        </style>
        <script src="http://www.hrgp.biz/HRGPScripts/jquery-1.5.js" type="text/javascript"></script>
        <%--Script for jquery Pop-up--%>
        <script src="http://www.hrgp.biz/include/HRGPScripts/jquery.tools.min.full.js" type="text/javascript"></script>
      
    </head>
    <body>
        <form id="form1" runat="server">
      
    <a id="aAddGoal" rel='#divGoal' runat="server" class="Links" onclick="OpenAddGoalPopUp();">
            Open PopUp</a>
        <div class="apple_overlay" id="divGoal" style="width: 870px; height: auto;  display: none;">
            <div class="headrow">
                <span id="spAddGoalTitle" style="padding-left: 10px;"></span><a class="close" style="background-image: url(../include/images/close.png);
                    position: absolute; right: 0%; top: 0%; margin: 0px; z-index: 10%; height: 35px;
                    width: 35px;" onclick="$('#divGoal').hide();"></a>
            </div>
            <div id="divGoalContent" style="padding-left: 10px;">
                <table border="0" cellpadding="0" cellspacing="0" style="padding-left: 6px;">
                    <tr>
                        <td valign="top" align="left" style="padding-bottom: 5px; font-size: 12px;">
                            <b>Description</b>
                        </td>
                        <td style="padding-bottom: 5px;">
                            <CE:Editor ID="CEDescription" runat="server" AutoConfigure="Simple" AllowPasteHtml="true"
                                UseStandardDialog="true" CssClass="inputBox" Width="310px" Height="150px" ResizeMode="None"
                                ShowHtmlMode="false" ShowBottomBar="false" EnableStripScriptTags="false" TemplateItemList="bold, Italic, underline,JustifyLeft,JustifyCenter,JustifyRight,forecolor,backcolor,InsertOrderedList,InsertUnorderedList,NetSpell,InsertLink,Unlink" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        </form>
    </body>
    </html>
      <script language="javascript" type="text/javascript">
            function OpenAddGoalPopUp() {
                $('#aAddGoal').overlay({ mask: { color: '#000', effect: 'apple' }, closeOnClick: false, load: true });
            }
        </script>
     
    Regards,
     
    Ken 
  •  01-10-2012, 7:35 AM 72589 in reply to 72583

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hello Ken,
     
    Thanks. This is working now.
     
    I have some more points here, please have a look:
    1. I want to set cute editor value dynamically (i.e at the time of edit this will be empty and in edit mode the value will be as coming from db (from ajax request)). I had used setHtml() and getHtml() for this but setHtml() is not working for setting empty value in editor.
    2.  if I open popup more than once then found that the content area is going disabled. Earlier I had notice this when I was using cut editor with ajax model pop-up extender.
     
    Please see the things and reply asap.
     
    Thanks,
    Neeraj 
     
  •  01-10-2012, 4:07 PM 72602 in reply to 72589

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi nrsharma,
     
    1. The example below shows you how to set empty content for editor
     
     
    <%@ 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">
    </head>
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            Editor1.Text = "content";
            base.OnLoad(e);
        }
    </script>
    <body>
        <form id="form1" runat="server">
            <CE:Editor ID="Editor1" runat="server">
            </CE:Editor>
            <input type="button" value="set empty value" onclick="setEmpty()" />
        </form>
    </body>
    </html>
    <script>
    function setEmpty()
    {
        var editor1=document.getElementById("<%= Editor1.ClientID %>");
        editor1.SetHTML(" ");
    }
    </script>
     

    2.  It works fine for me. Ensure that you are using the latest version
     
    Latest version downloads  http://www.cutesoft.net/downloads/folders/21904/download.aspx
     
    Regards,
     
    Ken 
  •  01-10-2012, 10:38 PM 72608 in reply to 72602

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hello Ken,
     
    Thanks for the quick reply. The point 1 is working fine I was using setHTML('') and you suggest SetHTML(" "), well not sure what was the problem there at but now this is working for me. For point (2) I want to update you that I am using a license version of cute editor and this is v 6.6.0.0.  The point is content area of cute editor is not allow to type text in there. I had faced this problem in ajax model pop-up extender as well. Please investigate it.
     
    Thanks,
    Neeraj 
  •  01-11-2012, 5:12 AM 72618 in reply to 72608

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi nrsharma,
     
    I suggest you try the latest package first. I still can not reproduce #2 on my end. Do you have a online example page I can test the #2 problem?
     
    Regards,
     
    Ken 
  •  01-12-2012, 5:43 AM 72641 in reply to 72618

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi Ken,
     
    Please follow this link http://www.hrgp.biz/TestEditor.aspx .
     
    1. (not working)Click on "Open Popup" link and as soon as the editor loading try to click in content area there (before editor fully loaded), now you find that editor doesn't allow inputs in there.
    2. (working) Secondly refresh the page and click on "Open Popup" link again, now when editor fully loaded in the popup then click in content area now you are able to input there.
     
    Thanks,
    Neeraj 
  •  01-12-2012, 6:06 AM 72643 in reply to 72641

    Re: Cute editor not loading properly in jquery pop-up with Chrome

    Hi nrsharma,
     
    Your page did not use the code I sent above, can you test my code on your end? Does it get the same problem?
     
    Regards,
     
    Ken 
View as RSS news feed in XML