[Dojo-interest] Re: Problem with popup menu position

Mon Apr 10 09:10:04 MDT 2006

> we've got a layout pane containing three content panes. The third (lower)
> content pane contains an element which will show a popup menu, when clicked.
> However the position of the popup window is not correct. It seems that the
> vertical position is shifted by the height of the upper two content panes. Has
> anyone experienced this problem and can provide a workaround for it?

Hi,

the code of the example needs to be changed if you use the nightly builds as the
LayoutPane has been renamed to LayoutContainer. Is this positioning problem a
general error which can be fixed? It occurs in Firefox and IE.

Regards

Frank.

<html>
	<head>
      <script type="text/javascript">
      var djConfig = {};
      </script>
      <script type="text/javascript" src="./nightly/dojo.js"></script>
      <script language="JavaScript" type="text/javascript">

         dojo.require("dojo.widget.LayoutContainer");
         dojo.require("dojo.widget.ContentPane");
         dojo.require("dojo.event.*");
         dojo.require("dojo.io.*");

         dojo.require("dojo.widget.Menu2");
         dojo.require("dojo.fx.html");

		</script>
	</head>
	<body>

      <div dojoType="LayoutContainer" widgetId="LayoutPane21" style="width:
600px; height: 400px;">
         <div dojoType="LayoutContainer" widgetId="LayoutPane22" style="width:
600px; height: 400px;">
            <div dojoType="ContentPane" widgetId="ContentPane24"
layoutAlign="top" style="height: 40px; background-color: #999999;">test</div>
            <div dojoType="ContentPane" widgetId="ContentPane25"
layoutAlign="top" style="height: 40px; background-color: #bbbbbb;">test</div>
            <div dojoType="ContentPane" layoutAlign="client"
style="background-color: #dddddd;" widgetId="ContentPane23">
               <span id="test1" style="color: #ff0000;">POPUP MENU</span>
               <div dojoType="PopupMenu2" targetNodeIds="test1">
               <div dojoType="MenuItem2" caption="MENU 1"></div>
               <div dojoType="MenuItem2" caption="MENU1-Item 1"></div>
               <div dojoType="MenuItem2" caption="MENU2-Item 2"></div>
               </div>
            </div>
         </div>
      </div>

	</body>
</html>