Jostein Solstad
Top achievements
Rank 1
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:
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
0
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
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
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
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
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
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.
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
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
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
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
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
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.
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
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:
Sincerely yours,
Tsvetie
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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
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
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