This is a migrated thread and some comments may be shown as answers.

Fullscreen mode and display

9 Answers 377 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jostein Solstad
Top achievements
Rank 1
Jostein Solstad asked on 30 Oct 2007, 06:31 PM
Hi

My editor is inside a div that has the style display: none at start, and after clicking a header, the editor is displayed. When i now use the full-screen mode, some of the other elements (like the <hr> ) are still visible. How come, and how can i fix that.

Here is the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test_test" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    Namespace="System.Web.UI" TagPrefix="asp" %> 
 
 
<!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>Ziki CMS</title> 
    <style type="text/css" > 
.ddp_1   
{  
    background-color: #FFFFEE;  
    width: 100%;  
    margin-top: 5px;  
    margin-bottom: 5px;  
    border: solid 1px #DDDDDD;  
}  
 
.ddp_1_menu_2  
{  
    cursor: pointer;   
    width: 800px;     
    float: left;  
    padding: 3px;  
}  
 
.ddp_1_container_1  
{  
    display: none;  
    height: 300px;  
}  
 
.div_clear  
{  
    clear: both;  
}  
    </style> 
 
    <script language="Javascript" type="text/javascript">  
    // JScript File  
function ShowDropDown(myWindow)  
{  
  var sDisplay;  
  sDisplay = document.getElementById(myWindow).style.display;  
  if (sDisplay == "block")  
  {  
    document.getElementById(myWindow).style.display = "none";  
  }  
  else  
  {  
    document.getElementById(myWindow).style.display = "block";  
  }    
}  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
                            <div class="ddp_1">  
                                <div class="ddp_1_menu_2" onclick="ShowDropDown('div_language');">  
                                    Click me  
                                </div>    
                                <div class="div_clear"></div> 
                                <div id="div_language" class="ddp_1_container_1">  
                                    <telerik:RadEditor ID="RadEditor1" runat="server" Height="150px" ToolsFile="~/xml/BasicTools.xml">  
                                        <Content> 
                                        </Content> 
                                    </telerik:RadEditor>    
                                </div> 
                            </div> 
          <hr class="hr2" /> 
    </form> 
</body> 
</html> 
      
 

9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 04 Nov 2007, 02:33 PM
Hello Jostein,

Please, try the following solution to hide the HTML elements that appears over the editor in Full Screen mode and show them when the editor is in normal mode:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server"> 
    <title>Ziki CMS</title>
    <style type="text/css" >
.ddp_1  

    background-color: #FFFFEE; 
    width: 100%; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    border: solid 1px #DDDDDD; 

 
.ddp_1_menu_2 

    cursor: pointer;  
    width: 800px;    
    float: left; 
    padding: 3px; 

 
.ddp_1_container_1 

    display: none; 
    height: 300px; 

 
.div_clear 

    clear: both; 

    </style>
 
    <script language="Javascript" type="text/javascript"> 
    // JScript File 
function ShowDropDown(myWindow) 

  var sDisplay; 
  sDisplay = document.getElementById(myWindow).style.display; 
  if (sDisplay == "block") 
  { 
    document.getElementById(myWindow).style.display = "none"; 
  } 
  else 
  { 
    document.getElementById(myWindow).style.display = "block"; 
  }   

    </script>
</head>
<body>
    <form id="form1" runat="server"> 

        <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        </asp:ScriptManager>
                            <div class="ddp_1"> 
                                <div class="ddp_1_menu_2" onclick="ShowDropDown('div_language');"> 
                                    Click me 
                                </div>   
                                <div class="div_clear"></div>
                                <div id="div_language" class="ddp_1_container_1"> 
<script type="text/javascript">
function OnClientCommandExecuted(editor, args)
{
   var fullScreen = false;
   var elems = document.getElementsByTagName("hr"); //elements to hide when the user switches to full screen mode
   for (var i=0; i< elems.length; i++)
   {
       var elem = elems[i];
   }
  
   if (args._commandName == "ToggleScreenMode")
   {
        fullScreen = !fullScreen;
        if (fullScreen)
        {
          if (elem.className == "hr2");
          {
            elem.style.display = "none"; //hide the H2 tag
          }
        }
        else
        {
            elem.style.display = ""; //show the H2 tag
        }
   }
}
</script>

<telerik:radeditor runat="server" ID="RadEditor1"
    OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:radeditor> 
                                </div>
                            </div>
          <hr class="hr2" />
    </form>
</body>
</html>


Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Jostein Solstad
Top achievements
Rank 1
answered on 04 Nov 2007, 03:15 PM
Ok, fair enough, but what this was just an example. What if there are several other elements visible. I.e there are more things showing in Firefox on another file I have. Why does it work like this? Is this not a bug?
0
Rumen
Telerik team
answered on 06 Nov 2007, 02:43 PM
Hello Jostein,

The problem is not related to RadEditor, but to the DOCTYPE of the page.

Basically, when you display the initially hidden editor, you should resize the DIV, because in the XHTML DOCTYPE scenario, the DIV does not know that the editor is resized and that's why the HR element appears over the editor.

    <script language="Javascript" type="text/javascript">
    // JScript File
function ShowDropDown(myWindow)
{
  var sDisplay;
  sDisplay = document.getElementById(myWindow).style.display;
  if (sDisplay == "block")
  {
    document.getElementById(myWindow).style.display = "none";
  }
  else
  {
    document.getElementById(myWindow).style.display = "block";
   
     document.getElementById(myWindow).style.width = "700px";
     document.getElementById(myWindow).style.height = "720px"

 
    //SET
    
  }  
}
    </script>

You can find more information about the BOX model in this article http://css.maxdesign.com.au/listamatic/about-boxmodel.htm or search in Google:
http://www.google.com/search?q=box+model+XHTML+doctype&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Jostein Solstad
Top achievements
Rank 1
answered on 07 Nov 2007, 09:59 PM
This does not prevent things getting over the editor in full screen mode. Lets say the editor has ha height of 300px, and when i show the div, i set the div height to 500px (according to your example), wich should be enough. When I press the editor full screen mode, the <hr> (and other text in Firefox) is still visible over the editor. Note, this is in full screen mode.

Telerik's first suggestion was to also hide the <hr> with javascript, but I do not think that is a good soultion since I then have to hard code each element.

I still fail to see how this is not a bug? You have other suggestions how to get the full screen mode to work properly?

Check my simple example that just has a div with a set height that holds an editor with a set height. Also here the hr shows in full screen mode.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test_test" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    Namespace="System.Web.UI" TagPrefix="asp" %> 
 
 
<!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>Ziki CMS</title> 
    <style type="text/css" > 
.ddp_1_container_1  
{  
    height: 300px;  
}  
    </style> 
 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
                                <div id="div_language" class="ddp_1_container_1">  
                                    <telerik:RadEditor ID="RadEditor1" runat="server" Height="150px" ToolsFile="~/xml/BasicTools.xml">  
                                        <Content> 
                                        </Content> 
                                    </telerik:RadEditor>    
                                </div> 
          <hr class="hr2" /> 
    </form> 
</body> 
</html> 
0
Rumen
Telerik team
answered on 08 Nov 2007, 04:05 PM
Hi Jostein,

As I pointed in my earlier answer the problem is not related to RadEditor, but with the overflow conception. The overflow declaration tells the browser what to do with content that doesn't fit in a box.

Please, review the following article for more information: The overflow declaration.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Joshua
Top achievements
Rank 1
answered on 30 Jan 2009, 05:41 AM
I have a similar problem/question.

I understand the BOX model and what's going on, but I need your advice on how to handle it.

Here's the situation...

I have a RadSplitter with two panes.  The left pane is set to 100px as the width. The right pane fills the remainder of the screen.  The right pane holds the editor.  When I press full screen mode, the editor is enlarged to the full screen, however, 100px on the right side of the editor is cut off.  Therefore it matches the width of the screen but only displays the width of the right pane.  I know this is an overflow issue.

My question, what do I target via javascript or css on the ClientCommandExecuted to set the div to not overflow:hidden?

Thanks,
Joshua
0
Rumen
Telerik team
answered on 02 Feb 2009, 03:49 PM
Hello Joshua,

Could you please, open a support ticket and send a sample working project that demonstrates the problem? Once we reproduce the problem, we will do our best to provide a solution.

Sincerely yours,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tsvetie
Telerik team
answered on 02 Feb 2009, 04:40 PM
Hello Joshua,
I created a simple test page in order to test the scenario you describe, however, I was not able to reproduce the problem you describe. I used the latest version of the suite for my test, namely Q3 2008 SP2 with version number 2008.3.1314. I have attached my test page for your reference.

As there was such problem with the RadEditor, which we have already fixed, I suppose you are using an old version of the suite.  That is why, you can either upgrade to the latest version of the RadControls for ASP.NET AJAX, or you can do the following:
<script type="text/javascript"
function OnClientCommandExecuting(sender, args) 
    var parentPane = $find('<%= RadPane2.ClientID %>'); 
    var contentContainer = parentPane.getContentElement(); 
     
    contentContainer.style.overflow = 'visible'
</script> 

Sincerely yours,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joshua
Top achievements
Rank 1
answered on 03 Feb 2009, 06:26 PM
@Tsvetie,

I'm already using the 3.1314 release and I'm having the issue, so you guys might want to take a look again.  Thanks for the code, I'll try it and see if it works.

Thanks,
Joshua
Tags
Editor
Asked by
Jostein Solstad
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jostein Solstad
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or