Hello Telerik!
I am currently experiencing a Mozilla FireFox exclusive issue involving the Z-Index of the mouse cursor while Dragging and Dropping from a TreeView to a RadEditor within a Modal Popup Panel. Earlier, I was experiencing this issue in both IE8 and FireFox, however, after applying this CSS property:
This solved the issue in IE8, but the problem persists in FireFox. I have a sample application in .zip format ready to send, however I can not attach a .zip file.
the Page structure is like this:
Page with an Ajax modalpopup control containing a user control
User Control contains a RadPanelBar, with 2 RadPanelItems, each RadPanelItem contains a RadTreeView
Each RadTreeView contains several RadTreeNodes
Drag And Drop on the RadTreeViews are active.
Next to the RadPanelBar is a RadEditor with standard toolbar controls.
What you should see is if you are in FireFox, you will notice that if move the cursor off the modal while dragging, that you will see the item appear behind the popup panel. Conversely, if you are in IE8, you will notice the intended functionality; the item correctly drops to the cursor position on the RadEditor.
I have tried increasing and decreasing the z-index value of the TelerikModalOverlay property, and it does not appear to have any positive results in FireFox. Also, I am currently using FireFox 5.0, and I can also reproduce this issue on previous versions of FireFox.
Attached, you will see a screenshot of the issue. To the left of the Modal Panel, you can see half of the cursor, depicting the text "Rule..." which actually says "Rule: 5" but I was attempting to capture the fact that half of the text is behind the popup.
Please let me know if I am doing something wrong, or if I need to implement an exclusive fix for FireFox browsers. I would be more than happy to send over a .zip file of a sample application which consistently reproduces the issue that I am experiencing.
Thanks in advance!
-Andrew
Code Here:
I am currently experiencing a Mozilla FireFox exclusive issue involving the Z-Index of the mouse cursor while Dragging and Dropping from a TreeView to a RadEditor within a Modal Popup Panel. Earlier, I was experiencing this issue in both IE8 and FireFox, however, after applying this CSS property:
.TelerikModalOverlay{ z-index: 100000 !important;}This solved the issue in IE8, but the problem persists in FireFox. I have a sample application in .zip format ready to send, however I can not attach a .zip file.
the Page structure is like this:
Page with an Ajax modalpopup control containing a user control
User Control contains a RadPanelBar, with 2 RadPanelItems, each RadPanelItem contains a RadTreeView
Each RadTreeView contains several RadTreeNodes
Drag And Drop on the RadTreeViews are active.
Next to the RadPanelBar is a RadEditor with standard toolbar controls.
What you should see is if you are in FireFox, you will notice that if move the cursor off the modal while dragging, that you will see the item appear behind the popup panel. Conversely, if you are in IE8, you will notice the intended functionality; the item correctly drops to the cursor position on the RadEditor.
I have tried increasing and decreasing the z-index value of the TelerikModalOverlay property, and it does not appear to have any positive results in FireFox. Also, I am currently using FireFox 5.0, and I can also reproduce this issue on previous versions of FireFox.
Attached, you will see a screenshot of the issue. To the left of the Modal Panel, you can see half of the cursor, depicting the text "Rule..." which actually says "Rule: 5" but I was attempting to capture the fact that half of the text is behind the popup.
Please let me know if I am doing something wrong, or if I need to implement an exclusive fix for FireFox browsers. I would be more than happy to send over a .zip file of a sample application which consistently reproduces the issue that I am experiencing.
Thanks in advance!
-Andrew
Code Here:
3 Answers, 1 is accepted
0
Hi Andrew,
Please, open a support ticket and send us your sample application so we can test it locally.
If you cannot send a ticket for some reason, let me know and we will provide you with additional instructions how to proceed.
Kind regards,
Peter
the Telerik team
Please, open a support ticket and send us your sample application so we can test it locally.
If you cannot send a ticket for some reason, let me know and we will provide you with additional instructions how to proceed.
Kind regards,
Peter
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
chiranjeevi
Top achievements
Rank 1
Rank 1
answered on 10 Nov 2011, 03:17 PM
Hi Peter ,
I am also getting same problem can u see..
my code is here
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
filter: Alpha(Opacity=40);
-moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.TelerikModalOverlay
{
}
/* The following CSS needs to be copied to the page to produce textbox-like RadEditor */
.rade_wrapper_corner, .rade_wrapper_center
{
display: none !important;
}
.rade_leftVerticalSide, .rade_rightVerticalSide, .rade_toolZone
{
filter: alpha(opacity=0) !important;
opacity: 0 !important;
}
.formInput
{
border: solid 1px black;
}
.reToolZone
{
display:none;
}
.rwTable
{
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
//<![CDATA[
function addtext(text) {
var sc = '<font color="#330099">' + text + '</font>';
var editor = $find("<%=RadEditor1.ClientID%>");
editor.setFocus();
editor.pasteHtml(sc);
}
function OnClientLoad(editor) {
var tree = $find("<%= RadTreeView1.ClientID %>");
makeUnselectable(tree.get_element());
}
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
function OnClientNodeDropping(sender, args) {
var editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
document.body.style.cursor = "default";
var result = isMouseOverEditor(editor, event);
if (result) {
var imageSrc = args.get_sourceNode().get_text();
editor.setFocus();
var text = '<font color="#ff0000">' + imageSrc + '</font>';
editor.pasteHtml(text);
setOverlayVisible(false);
document.getElementById("btnn").click();
// var imageSrc = args.get_sourceNode().get_value();
//// if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1)) {
// var imageSrc = "<img src='" + imageSrc + "'>";
// editor.setFocus();
// editor.pasteHtml(imageSrc);
// // }
}
setOverlayVisible(false);
}
function OnClientNodeDragging(sender, args) {
var editor = editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
if (isMouseOverEditor(editor, event)) {
document.body.style.cursor = "hand";
}
else {
document.body.style.cursor = "no-drop";
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index < nodes.length; index++) {
var elem = nodes[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var shimId = null;
function setOverlayVisible(toShow) {
if (!shimId) {
var div = document.createElement("DIV");
document.body.appendChild(div);
shimId = new Telerik.Web.UI.ModalExtender(div);
}
if (toShow) shimId.show();
else shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, events) {
var editorFrame = editor.get_contentAreaElement();
var editorRect = $telerik.getBounds(editorFrame);
var mouseX = events.clientX;
var mouseY = events.clientY;
if (mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return true;
}
return false;
}
/* ================== These two methods are not related to the drag/drop functionality, but to the preview functionality =======*/
function Scale(img, width, height) {
var hRatio = img.height / height;
var wRatio = img.width / width;
if (img.width > width && img.height > height) {
var ratio = (hRatio >= wRatio ? hRatio : wRatio);
img.width = (img.width / ratio);
img.height = (img.height / ratio);
}
else {
if (img.width > width) {
img.width = (img.width / wRatio);
img.height = (img.height / wRatio);
}
else {
if (img.height > height) {
img.width = (img.width / hRatio);
img.height = (img.height / hRatio);
}
}
}
}
function BeforeClick(sender, args) {
var node = args.get_node();
var object = document.createElement("IMG");
object.src = node.get_value();
if (node.get_attributes().getAttribute("Category") == "Folder") {
return;
}
var previewPane = document.getElementById("previewPane");
if (object.complete) {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
}
else {
previewPane.innerHTML = "Loading image...";
object.onload = function () {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
object.onload = null;
}
}
}
//]]>
</script>
<asp:ToolkitScriptManager ID="too" runat="server"></asp:ToolkitScriptManager>
<asp:Button ID="btn" runat="server" />
<asp:ModalPopupExtender ID="pop" runat="server" TargetControlID="btn" PopupControlID="panel1"></asp:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div style="width:500px; height:500px; background-color:Aqua;">
<table width="97%" summary="Resource Browser">
<tr>
<td valign="top" style="width: 400px;" class="module">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" EnableDragAndDrop="True"
OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging"
OnClientNodeDropping="OnClientNodeDropping"
Width="200px" Skin="Default">
<Nodes>
<telerik:RadTreeNode Text="1" Value="1">
<Nodes>
<telerik:RadTreeNode Text="11" Value="11"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="12" Value="12"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="13" Value="13"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="14" Value="14"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="15" Value="15"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="16" Value="16"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="17" Value="17"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="18" Value="18"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="19" Value="19"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="2" Value="2">
<Nodes>
<telerik:RadTreeNode Text="21" Value="21"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="22" Value="22"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="23" Value="23"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="24" Value="24"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="25" Value="25"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</td>
<td style="padding-left: 20px" valign="top">
<telerik:RadEditor OnClientLoad="OnClientLoad" SkinID="BasicSetOfTools" Width="500" EditModes="Design" ToolbarMode="ShowOnFocus" Height="500" ID="RadEditor1" runat="server">
<Content>
</Content>
</telerik:RadEditor>
</td>
<td>
</td>
</tr>
</table>
</div>
</asp:Panel>
</form>
</body>
</html>
I am also getting same problem can u see..
my code is here
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalBackground
{
filter: Alpha(Opacity=40);
-moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.TelerikModalOverlay
{
}
/* The following CSS needs to be copied to the page to produce textbox-like RadEditor */
.rade_wrapper_corner, .rade_wrapper_center
{
display: none !important;
}
.rade_leftVerticalSide, .rade_rightVerticalSide, .rade_toolZone
{
filter: alpha(opacity=0) !important;
opacity: 0 !important;
}
.formInput
{
border: solid 1px black;
}
.reToolZone
{
display:none;
}
.rwTable
{
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
//<![CDATA[
function addtext(text) {
var sc = '<font color="#330099">' + text + '</font>';
var editor = $find("<%=RadEditor1.ClientID%>");
editor.setFocus();
editor.pasteHtml(sc);
}
function OnClientLoad(editor) {
var tree = $find("<%= RadTreeView1.ClientID %>");
makeUnselectable(tree.get_element());
}
function OnClientNodeDragStart() {
setOverlayVisible(true);
}
function OnClientNodeDropping(sender, args) {
var editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
document.body.style.cursor = "default";
var result = isMouseOverEditor(editor, event);
if (result) {
var imageSrc = args.get_sourceNode().get_text();
editor.setFocus();
var text = '<font color="#ff0000">' + imageSrc + '</font>';
editor.pasteHtml(text);
setOverlayVisible(false);
document.getElementById("btnn").click();
// var imageSrc = args.get_sourceNode().get_value();
//// if (imageSrc && (imageSrc.indexOf(".gif") != -1 || imageSrc.indexOf(".jpg") != -1)) {
// var imageSrc = "<img src='" + imageSrc + "'>";
// editor.setFocus();
// editor.pasteHtml(imageSrc);
// // }
}
setOverlayVisible(false);
}
function OnClientNodeDragging(sender, args) {
var editor = editor = $find("<%=RadEditor1.ClientID%>");
var event = args.get_domEvent();
if (isMouseOverEditor(editor, event)) {
document.body.style.cursor = "hand";
}
else {
document.body.style.cursor = "no-drop";
}
}
/* ================== Utility methods needed for the Drag/Drop ===============================*/
//Make all treeview nodes unselectable to prevent selection in editor being lost
function makeUnselectable(element) {
var nodes = element.getElementsByTagName("*");
for (var index = 0; index < nodes.length; index++) {
var elem = nodes[index];
elem.setAttribute("unselectable", "on");
}
}
//Create and display an overlay to prevent the editor content area from capturing mouse events
var shimId = null;
function setOverlayVisible(toShow) {
if (!shimId) {
var div = document.createElement("DIV");
document.body.appendChild(div);
shimId = new Telerik.Web.UI.ModalExtender(div);
}
if (toShow) shimId.show();
else shimId.hide();
}
//Check if the image is over the editor or not
function isMouseOverEditor(editor, events) {
var editorFrame = editor.get_contentAreaElement();
var editorRect = $telerik.getBounds(editorFrame);
var mouseX = events.clientX;
var mouseY = events.clientY;
if (mouseX < (editorRect.x + editorRect.width) &&
mouseX > editorRect.x &&
mouseY < (editorRect.y + editorRect.height) &&
mouseY > editorRect.y) {
return true;
}
return false;
}
/* ================== These two methods are not related to the drag/drop functionality, but to the preview functionality =======*/
function Scale(img, width, height) {
var hRatio = img.height / height;
var wRatio = img.width / width;
if (img.width > width && img.height > height) {
var ratio = (hRatio >= wRatio ? hRatio : wRatio);
img.width = (img.width / ratio);
img.height = (img.height / ratio);
}
else {
if (img.width > width) {
img.width = (img.width / wRatio);
img.height = (img.height / wRatio);
}
else {
if (img.height > height) {
img.width = (img.width / hRatio);
img.height = (img.height / hRatio);
}
}
}
}
function BeforeClick(sender, args) {
var node = args.get_node();
var object = document.createElement("IMG");
object.src = node.get_value();
if (node.get_attributes().getAttribute("Category") == "Folder") {
return;
}
var previewPane = document.getElementById("previewPane");
if (object.complete) {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
}
else {
previewPane.innerHTML = "Loading image...";
object.onload = function () {
Scale(object, 100, 100);
previewPane.innerHTML = "";
previewPane.appendChild(object);
object.onload = null;
}
}
}
//]]>
</script>
<asp:ToolkitScriptManager ID="too" runat="server"></asp:ToolkitScriptManager>
<asp:Button ID="btn" runat="server" />
<asp:ModalPopupExtender ID="pop" runat="server" TargetControlID="btn" PopupControlID="panel1"></asp:ModalPopupExtender>
<asp:Panel ID="panel1" runat="server">
<div style="width:500px; height:500px; background-color:Aqua;">
<table width="97%" summary="Resource Browser">
<tr>
<td valign="top" style="width: 400px;" class="module">
<telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" EnableDragAndDrop="True"
OnClientNodeDragStart="OnClientNodeDragStart" OnClientNodeDragging="OnClientNodeDragging"
OnClientNodeDropping="OnClientNodeDropping"
Width="200px" Skin="Default">
<Nodes>
<telerik:RadTreeNode Text="1" Value="1">
<Nodes>
<telerik:RadTreeNode Text="11" Value="11"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="12" Value="12"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="13" Value="13"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="14" Value="14"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="15" Value="15"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="16" Value="16"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="17" Value="17"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="18" Value="18"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="19" Value="19"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="2" Value="2">
<Nodes>
<telerik:RadTreeNode Text="21" Value="21"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="22" Value="22"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="23" Value="23"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="24" Value="24"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="25" Value="25"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</td>
<td style="padding-left: 20px" valign="top">
<telerik:RadEditor OnClientLoad="OnClientLoad" SkinID="BasicSetOfTools" Width="500" EditModes="Design" ToolbarMode="ShowOnFocus" Height="500" ID="RadEditor1" runat="server">
<Content>
</Content>
</telerik:RadEditor>
</td>
<td>
</td>
</tr>
</table>
</div>
</asp:Panel>
</form>
</body>
</html>
0
Hello,
In order to drop an item over the iframe-based content area of RadEditor, we create an overlay drop area over RadEditor. The drop area must have a z-index higher than that of the modal popup extender. So
you need to add the following css fix:
.TelerikModalOverlay
{
z-index: 100001 !important;
}
Here is a video capture of our test using the local examples and the above css -http://screencast.com/t/0KxdP8FqSgN
Regards,
Peter
the Telerik team
In order to drop an item over the iframe-based content area of RadEditor, we create an overlay drop area over RadEditor. The drop area must have a z-index higher than that of the modal popup extender. So
you need to add the following css fix:
.TelerikModalOverlay
{
z-index: 100001 !important;
}
Here is a video capture of our test using the local examples and the above css -http://screencast.com/t/0KxdP8FqSgN
Regards,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now