Is Atlas compatible with Master Pages?

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Is Atlas compatible with Master Pages?

Shortcuts

Previous Next

Is Atlas compatible with Master Pages?

Rate It (1)

Last post 10-27-2006 9:03 AM by Jesús. 14 replies.

Sort Posts:

Is Atlas compatible with Master Pages?

08-29-2006, 8:50 AM

Contact

55 point Member
SNewman
Member since 05-11-2006, 8:37 AM
North Staffordshire
Posts 11

Hi,

I've got an issue that I have been trying to lock down for about a week now with no success and could really do with some input.
Basically I have a panel that i have extended with the Drag Panel Extender, when I try to drag the panel it jumps down and to the right! I can still drag the panel around but it's offset from the mouse position. Also simply clicking on the Drag Handle caused the whole panel to jupm down and to the right, each click causes is to jump again.

I have managed to trace this issue down to the way I have my project set up.

I am using Master Pages and have a content placeholder that is offset from the top and left corners of my page as I have headers and a panel on the left that I want on every page. I have noted through painstakingly measuring using a pixel ruler that the jump the panel takes is exactly the offset of the content placeholder from the top left of the browser rendering area.

To clarify: the top of my placeholer is 150px and the left is 200px.
When i click on theDrag Handle the panel jumps 150px down and 200px right from the mouse, I have looked through the javascript etc in the control toolkit and I have not been able to find what I'm looking for.

I found the StartDrag routine and there is ome stuff in there that sets the mouseposition and then sets the start position for the drag to be that same position but while I'm sure this is wrong, I as unable to successfully correct anything in here to stop the behaviour.

I think that the top left of the drag panel is being set relative to the browser render surface when the panel itself is relative to the content placeholder so you get this offset issue.

I can get a successful drag panel working when I move it to the master page but as I am trying to create a custom user control with a popup dialog that can be dragged around the page this is not a good solution.

i need ideas to solve this offsetting problem other than moving the panel ot of my cotrol and onto the master page as this will stop me from releasing a control that users can drag onto a page and just use, popup draggable dialog and all...

Cheers!
Mav.

Re: Is Atlas compatible with Master Pages?

08-30-2006, 3:02 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi SNewman,

Is the target of your DragPanel absolutely positioned? One of the first things that the floatingBehavior (which is the "Atlas" behavior used by DragPanel) does is sets position: absolute; and sets top/left to the its original coordinates (although it sounds like in your case, it's mistaken about these coordinates).

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Filed under: DragPanel

Re: Is Atlas compatible with Master Pages?

08-31-2006, 3:35 AM

Contact

55 point Member
SNewman
Member since 05-11-2006, 8:37 AM
North Staffordshire
Posts 11

Hi Ted,

Yup the target is absolutely positioned.

What I found was that there is some code that works out the old position of the drag panel (I'm guessing so it could send it back there if I were to do a drag drop and the drop need to be cancelled?) and it appears to do this based on the mouse position using the x, y coordinates and then there is a calculation performed based on that. I was not able to confirm that this is the calculation causing the issue but it kind of fits as the x, y, co-ordinates of the mouse are relative to the browser? while the top and left co-ordinates of the drag handle are relative to the content placeholder.

Does this sound right to you?

Cheers!
Mav.

Re: Is Atlas compatible with Master Pages?

09-01-2006, 3:53 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi SNewman,

Yeah, I followed the code through about that far myself when I looked at it the other day. Could you try it without the target being absolutely positioned and see if that works? Here's the code for getLocation:

    Sys.UI.Control.getLocation = function(element) {|
        var offsetX = 0;
        var offsetY = 0;
        var parent;
        for (parent = element; parent; parent = parent.offsetParent) {
            if (parent.offsetLeft) {
                offsetX += parent.offsetLeft;
            }
            if (parent.offsetTop) {
                offsetY += parent.offsetTop;
            }
        }
        return { x: offsetX, y: offsetY };
    }

My guess is that since it doesn't check to see if your control is absolutely positioned, it walks all the way up the hierarchy and computes where it would be if it wasn't absolutely positioned.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Filed under: DragPanel

Re: Is Atlas compatible with Master Pages?

09-14-2006, 10:41 AM

Contact

94 point Member
lking
Member since 02-27-2006, 4:18 PM
Posts 22

Hello Ted,

Is there a solution for this? I'm unable to remove the position:absolute due to the fact that I'm trying to set the location of the dragPanel dynamicly. When I remove the flag the panel always displays at 0, 0. Can you offer any suggestions? I'm using Change Set 5716 of the control toolkit.

Thanks,

Lance

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="input_pages_Default3" %>

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function getInputHelp()

{

$('helpHeader').innerHTML = 'Header text';

$('helpContent').innerHTML = 'Body Text';

$('helpDragPanel').style.left = '100px';

$('helpDragPanel').style.top = '75px';

$('helpDragPanel').style.visibility = 'visible';

}

function closeHelp()

{

$('helpHeader').innerHTML = '';

$('helpContent').innerHTML = '';

$('helpDragPanel').style.visibility = 'hidden';

}

</script>

<title>Untitled Page</title>

</head>

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" >

</atlas:ScriptManager>

<body>

<atlasToolkit:DragPanelExtender ID="dragpeHelp" runat="server">

<atlasToolkit:DragPanelProperties TargetControlID="panelHelp" DragHandleID="panelHelpHeader" >

</atlasToolkit:DragPanelProperties>

</atlasToolkit:DragPanelExtender>

<asp:Panel ID="panelHelp" runat="server" Width="100%" CssClass="HelpDragPanel">

<asp:Panel BackColor="lightblue" BorderStyle="Solid" BorderWidth="1px" BorderColor="black" ID="panelHelpHeader" runat="server" Width="100%" >

</asp:Panel>

<asp:Panel BorderStyle="Solid" BackColor="gray" ForeColor="black" BorderWidth="1px" BorderColor="black" ID="panelHelpContent" runat="server" Width="100%" >

</div>

</asp:Panel>

</div>

<div>

</div>

</form>

</body>

</html>

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-18-2006, 9:10 AM

Contact

94 point Member
lking
Member since 02-27-2006, 4:18 PM
Posts 22

Sorry for the second post, but does anyone have any idea's?

I'm seeing this issue in the released toolkit of 09/14 also.

Thanks,

Lance

Filed under: DragPanel

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-19-2006, 6:59 AM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi Lance,

Unfortunately this is a problem due to "Atlas" and the Toolkit can't outright modify the code to get it working. However, since this is a static function, you could replace it from your own code using something like:

Sys.UI.Control.getLocation = function(element) { /* Do whatever it used to do, but also check if absolutely positioned */ };

As long as you replace that before your drag panel is initialized, it will be used instead of the incorrect function. I know this is a very awkward hack, but I think it's your only option aside from modifying the "Atlas" scripts themeslves.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-19-2006, 9:30 AM

Contact

94 point Member
lking
Member since 02-27-2006, 4:18 PM
Posts 22

Hello Ted,

Thanks for the info. Do you see this being corrected in Atlas or am I trying to do something that was never intended?

I'm pretty new to this, so could you give me a hint on where to put Sys.UI.Control.getLocation = function(element). When I add it to the page I get Sys is undefined. I do have the atlas:ScriptManager on the page.

Thanks

Lance

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-19-2006, 1:55 PM

Contact

94 point Member
lking
Member since 02-27-2006, 4:18 PM
Posts 22

Hello Ted,

One of my counter parts found a work around for this. Here is what he used.

We moved the asp:panel (ID = panelHelp) outside of the div tag (ID = helpDragPanel). Set the style for both to style="visibility:hidden; position:absolute".

<asp:Panel ID="panelHelp" runat="server" Width="100%" style="visibility:hidden; position:absolute">

<asp:Panel BackColor="lightblue" BorderStyle="Solid" BorderWidth="1px" BorderColor="black" ID="panelHelpHeader" runat="server" Width="100%" >

</asp:Panel>

<asp:Panel BorderStyle="Solid" BackColor="gray" ForeColor="black" BorderWidth="1px" BorderColor="black" ID="panelHelpContent" runat="server" Width="100%" >

</div>

</asp:Panel>

</div>

</asp:Panel>

By doing this, everything works as expected.

All examples I've seen shows it the other way around, but this seems to work fine.

Hopefully this will help someone else out.

Thanks,

Lance

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-20-2006, 9:06 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi Lance,

You want to add that after the "Atlas" scripts have been loaded. The easiest way to do that is to add a JavaScript function on your page called pageLoad (which "Atlas" will automatically call if there). Ex:
function pageLoad()
{
alert('"Altas" has finished loading - we can access whatever we want now');
Sys.UI.Control.getLocation = function(element) { return {'x':0, 'y':0}; };
}

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

09-20-2006, 9:16 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi Lance,

I'm not 100% sure why your workaround is fixing the problem, but I'm glad you've got it taken care of. Here's another way to do it (for those following along at home who are a little confused about this whole problem):

<%@ Page Language="C#" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!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>Test Page</title></head>
<body><form runat="server"><div>
    <atlas:ScriptManager id="ScriptManager1" runat="Server"></atlas:ScriptManager>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="anchorDiv">
        <asp:Panel ID="Content" runat="server" style="position: absolute; top: 10px; left: 10px; width: 100px;">
            <asp:Panel ID="Handle" runat="server" style="border: 1px solid #000000; width: 100%; height: 20px;">Drag Me</asp:Panel>
            <div style="border: 1px solid #000000; width: 100%; height: 100px;">Content</div>
        </asp:Panel>
    </div>
    
    <atlasToolkit:DragPanelExtender ID="MyExtender" runat="server">
        <atlasToolkit:DragPanelProperties
        TargetControlID="Content"
        DragHandleID="Handle" />
    </atlasToolkit:DragPanelExtender>

    <script type="text/javascript">
        // The following snippet works around a problem where Atlas's FloatingBehavior
        // doesn't allow drops outside the "content area" of the page - where "content
        // area" is a little unusual for our sample web pages due to their use of CSS
        // for layout.
        function setBodyHeightToContentHeight() {
            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
        }
        setBodyHeightToContentHeight();
        window.attachEvent('onresize', setBodyHeightToContentHeight);
    </script>
</div></form></body>
</html>

This works because anchorDiv is not absolutely positioned. If you add style='position: absolute' to anchorDiv, then you'll see the bug that we're talking about.

This is definitely a bug in the "Atlas" Sys.UI.Control.getLocation function. I'm not sure about when they'll have it fixed, but in the meantime if you need a better version of the function you can use the one provided in our Common.js file that Ron Buckton (a community contributor!) wrote.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

10-12-2006, 2:41 PM

Contact

110 point Member
MrVithan
Member since 06-16-2006, 11:29 AM
Posts 30

where can i find the Common.js you was talking about ?

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

10-25-2006, 5:05 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi MrVithan,

You can find Common.js in the AjaxControlToolkit\AjaxControlToolkit\Common\ folder.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

10-27-2006, 6:56 AM

Contact

55 point Member
SNewman
Member since 05-11-2006, 8:37 AM
North Staffordshire
Posts 11

Hi Ted,

if we use the version in the common.js do we need to specifically include this .js or is it automagically downloaded as part of the control toolkit at runtime? can you give an example of how to correctly access the function in this common.js, correctly overriding the base version?

If anyone from MS is actually paying attention to this thread... It really would be nice if you fixed this bug, it's not exactly a small issue Big Smile

Thank in advance Ted.

Cheers!
Mav.

Re: DragPanel jumps down and to the right (former: Is Atlas compatible with Master Pages?)

10-27-2006, 9:03 AM

Contact

165 point Member
Jesús
Member since 05-09-2006, 2:08 PM
Madrid (Spain)
Posts 33

This is the same bug I reported a couple days ago. I provided a repro and a fix. The bug is in the AjaxControlToolkit.DragDropManager, so you can fix it, I think.

This is the thread:

http://forums.asp.net/thread/1437484.aspx

Regards

Page 1 of 1 (15 items)

RSS Available