Problem with full screen mode trapped within div section

Last post 09-18-2008, 7:50 PM by aibility. 13 replies.
Sort Posts: Previous Next
  •  09-08-2008, 7:04 PM 43743

    Problem with full screen mode trapped within div section

    Hello,
     
    I have a headache trying to figure out how to make Cute Editor's full screen mode work inside of nested div tags. I used FCKeditor before I decided to buy CuteEditor for my project, and I had the same problem with that editor - until I realized that it was overriding the classes - so all I had to do to solve the problem was to add class definitions in addition to ID definitions inside the div declaration.
     
    Below is the code for repeating the problem:
     
     
    CSS Code:
    html, body {
        font: normal 12px tahoma, arial, verdana, sans-serif;
        margin: 0;
        padding: 0;
        border: 0 none;
    }
    .body_menu {
        /* image */
    }
    .body_nomenu {
        /* image */
    }
    div#header {
        /* image */
    }
    div#header_menu {
        /* image */
    }
    div.header {
        position:absolute;
        width:100%;
        height:277px;
        left:0px;
        top:0px;
    }
    div#outer {  /*surrounds the page*/
        position:absolute;
        width: 100%;
        margin-top: 125px;
        margin-bottom: 0px;
        padding: 0px;
        border: 0 none;
    }
    div#menu_top {
        z-index:120;
        position:relative;
        margin-left: auto;
        margin-right: auto;    
        margin-top: auto;
        margin-bottom: auto;     
        width:680px;
        height:18px;
        left:0px;
        top:0px;
        border: 0 none;
    }
    div#content_area {
        position:relative;
        margin-left: auto;
        margin-right: auto;    
        margin-top: auto;
        margin-bottom: auto;
        background:transparent none;  
        border-bottom: 1px solid black;
        width:780px;
        padding: 0px;
        height: auto;
        left:0px;
        top:15px;
        overflow:auto;
        border: 0 none;  
    }

    div#menu_left_container {  
        width: 180px;
        padding: 0px;
        margin-top: 0px;
        float: left;
        color: white;
        border: 0 none;
    }

    div.menu_left_block {
        width: 170px;
        padding: 5px;
        margin-top: 1px;
        color: white;
        border: 0 none;
    }
    div#content_right {
        width: 570px;
        padding: 5px;
        margin-top: 0px;
        float: right;
        border: 0 none;
    }
    div#footer_top {
        background:#e0e0e0 url(/images/footer_top.gif) no-repeat 50% 0;  
        height:5px;
        overflow:hidden;
    }
    div#footer {
        background:#e0e0e0 url(/images/footer.gif) repeat-y 50% 0;
        height:auto;
        overflow:auto;
    }
    div#footer_bottom {
        background:#e0e0e0 url(/images/footer_bottom.gif) no-repeat 50% 0;
        height:3px;
        overflow:hidden;
    }
    div.footer {
        position:relative;
        margin-left: auto;
        margin-right: auto;    
        margin-top: auto;
        margin-bottom: auto;
        width:100%;
        left:0px;
        top:50px;
        text-align: center;
        border: 0 none;
        color: white;
    }
     
     
     
     
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//SV" "http://www.w3.org/TR/html4/strict.dtd">  
    <?php
    // include your editor code here
    ?>
    <html>
    <head>
    <!-- Custom CSS and Libs -->
    <link rel="stylesheet" href="http://cutesoft.net/css/abovestylesheet.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <TITLE>TITLE</TITLE>
    </head>
    <body class="body_menu">
    <div id="header_menu" class="header">&nbsp;</div>
    <div id="outer">
                  <div id="menu_top" class="menustyle">MENU</div>
        <div id="content_area">
    <div id="menu_left_container">
        <div class="menu_left_block">Menu1</div>
        <div class="menu_left_block">Menu2</div>
        <div class="menu_left_block">Menu3</div>
    </div>
    <div id="content_right">
    CONTENT
    Editor:<br /><br />

    <?php
             $editor->Draw();
             $editor=null;
    ?>
    </div>
        </div>
        <div id="footer_top" class="footer">&nbsp;</div>
        <div id="footer" class="footer">FOOTER</div>
        <div id="footer_bottom" class="footer">&nbsp;</div>
    </div>
    </body>
    </html>

    Any help in finding the solution would be appreciated!
     
    Thanks for your support!
    //Aron
  •  09-09-2008, 1:49 PM 43780 in reply to 43743

    Re: Problem with full screen mode trapped within div section

     Here is 2 live examples of similar code:
     
     
  •  09-09-2008, 2:08 PM 43782 in reply to 43743

    Re: Problem with full screen mode trapped within div section

    I've tested your examples which work fine here.
     
    Can you explain the problems in details?

    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

  •  09-09-2008, 2:23 PM 43784 in reply to 43782

    Re: Problem with full screen mode trapped within div section

    The only detail needed is that it's not possible to run the editor in full screen mode.
     
    Please navigate to one of the examples and click the Fit To Window button of the editor. The editor is now extended within a div element - and it far exceeds the screen.
  •  09-09-2008, 2:32 PM 43785 in reply to 43784

    Re: Problem with full screen mode trapped within div section

  •  09-09-2008, 2:50 PM 43790 in reply to 43785

    Re: Problem with full screen mode trapped within div section

    Firefox 3.0.1 and IE 7
    But this does not work in any browser version I have tested. (IE6, Opera, Firefox 2)
  •  09-09-2008, 3:19 PM 43792 in reply to 43790

    Re: Problem with full screen mode trapped within div section

    It would be very useful to know what is causing the problem so that we can work around this bug.
     
    One of the examples is working ok in IE, but just one. And none of them is displaying correctly in Firefox.
  •  09-10-2008, 5:20 AM 43816 in reply to 43792

    Re: Problem with full screen mode trapped within div section

    Referring to this thread: http://cutesoft.net/forums/2/4645/ShowThread.aspx
     
    This issue seems to have been resolved in the .NET version of the editor.
  •  09-11-2008, 9:45 AM 43844 in reply to 43816

    Re: Problem with full screen mode trapped within div section

    Adam, can you reproduce this problem?

    Maybe there is a solution by changing the use of classes or ID's for div tags? I am not sure how the fit-screen feature works since I'm new to CuteEditor. But I have still not managed to solve the issue - and I have been working with this far too many hours now, so I beg anyone who knows anything about this to reply.
     
    I have updated the example here: http://www.aibility.com/test/


    You can try the fit-to window button, then click the lnk to see an editor that actually maximizes on the same html/css base code.
  •  09-11-2008, 1:04 PM 43851 in reply to 43844

    Re: Problem with full screen mode trapped within div section

  •  09-12-2008, 10:35 AM 43882 in reply to 43851

    Re: Problem with full screen mode trapped within div section

    Email sent, please let me know if you did not receive it. Thanks!
  •  09-17-2008, 9:06 AM 44017 in reply to 43882

    Re: Problem with full screen mode trapped within div section

    Any news on this Adam? Did you receive the mail?
  •  09-17-2008, 6:56 PM 44035 in reply to 44017

    Re: Problem with full screen mode trapped within div section

    aibility,
     
    It is caused by your style sheet.
     
    div#content_area {
        position:relative;
        margin-left: auto;
        margin-right: auto;   
        margin-top: auto;
        margin-bottom: auto;
        background:transparent none; 
        border-bottom: 1px solid black;
        width:780px;
        padding: 0px;
        height: auto;
        left:0px;
        top:15px;
        overflow:auto;
        border: 0 none; 
    }

    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

  •  09-18-2008, 7:50 PM 44080 in reply to 44035

    Re: Problem with full screen mode trapped within div section

    Thanks for your response.

    Unfortunately, this only solves the problem for Internet Explorer.
     
    I suppose my second option would be to start from scratch with the whole site layout. 
View as RSS news feed in XML