[Dojo-interest] Adding content to FloatingPane

[Thias]

To summarize: How can we create a FloatingPane programatically
and then add other dojo widgets or HTML input tags to the FloatingPane
programmatically. I'll
show what I've learned so far in hopes progressing towards a solution.

1. I want to build the following HTML programatically. As you can see  from
the below example I have a SplitPane with one ContentPane on it. I want to
programatically add
FloatingPane(s) to the ContentPane named "toolkitpalette". Notice the HTML
<input> tag within the FloatingPane. This static HTML visually looks and
behaves as I would like it too with one exception.  The FloatingPane
contains the HTML input
field of type text which takes up 100% of the FloatingPane, can be resized
etc...
Life is basically good here except when trying to move (drag) the floating
pane around. The
mouse position and the drag position do not match.

<div dojoType="SplitPane" orientation="vertical" sizerWidth="5"
activeSizing="0" style="width: 100%; height: 100%;" sizeMin="50"
sizeShare="80">

      <div dojoType="ContentPane" id="toolkitpalette">
          <div id="t1"
            dojoType="FloatingPane"
            style="width: 250px; height: 100px;" resizable="true"
            titleBarDisplay="fancy"
             title="test">

            <!-- Create this HTML input field on top of the floating
pane -->
            <input type="text" style="width:100%;height:100%" />

          </div> <!-- FloatingPane t1 -->
      </div> <!-- ContentPane toolkitpalette -->
</div> <!-- SplitPane Right -->

Now, how can we accomplish this programatically. We want to create the
FloatingPane, add the <input type=text> to it, then add the FloatingPane to
the ContentPane. Here's what I would expect to work but the floating pane
doesn't look right. The size widget is at the top left, and yes...life is
not too good.

// The target node is a ContentPane
var targetNode = e.originalTarget;

//
// Create the input field of type text
//
var newControl = document.createElement("input");

// I put a border around the input field so I could try to see where it is
positioned.
// Also, its width is 100% because we want it to size along with the
floating pane
var controlStyle = "width: 100%;border: 2px solid black";
newControl.setAttribute("type","text");
 newControl.setAttribute("style",controlStyle);
newControl.setAttribute("widgetId","myinputwidget");

// now create the floating pane
var newEl = dojo.widget.createWidget("FloatingPane",
                                                             {title: "Entry
Field",resizable: true,id:"mynewfloatpane",titleBarDisplay: "simple"});

// Add the new input text control to the floating pane.
newEl.domNode.appendChild(newControl);

// We want the floating pane position to be upper left corner of the content
pane
var newElStyle = "width: 250px; height:
100px;position:absolute;top:1;left:1";
newEl.domNode.style.cssText = newElStyle;

// Finally, add the floating pane to the target content pane
targetNode.appendChild(newEl.domNode);


The resulting FloatingPane is quite hosed. I tried a number of other coding
possibilities over the
last couple of days but nothing seems to work consistently.

Any help would be greatly appreciated.

Thanks,
  Mark Thias