Ticket #5494 (new defect)

Opened 7 months ago

Last modified 5 months ago

InlineEditBox fails to appear inline

Reported by: jeffg Owned by: bill
Priority: high Milestone: 1.3
Component: Dijit Version: 1.0
Severity: major Keywords:
Cc:

Description

If a div is absolutely positioned and then a dijit.InlineEditBox? is associated with it, then when the div is clicked on, the inlineEditBox input popup appears at 0,0 and not on top of (inline with) the div.

Looking at the code in postCreate() we can see that only select styles are being copied from the source node. We tried to also have it also copy "top", "left" and "position" by adding another forEach loop, but that didn't work to fix the problem.

Here is a test case:

<html>
<head>
    <script type="text/javascript" src="dojo.x/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.Toolbar");
        dojo.require("dijit.InlineEditBox");
        dojo.require("dojo.parser");

        function createTextAtPosition( id, x, y, text )
        {
            var e = document.createElement('div');

            e.id = id;
            e.style.position = "absolute";
            e.style.left =  x + "px";
            e.style.top =  y + "px";

            e.style.borderWidth =  "1px";
            e.style.borderStyle =  "solid";
            e.style.borderColor =  "#ff00ff";

            var str = "click to test InlineEditBox appears in place. But instead it will appear under the toolbar!";
            e.textContent = str;

            var _test =  dojo.byId('test');
            _test.appendChild( e );

            var edit = new dijit.InlineEditBox({width:"150px"}, e.id);
            return e;
        }

        function test()
        {
            createTextAtPosition( "inlineID", 150, 150, "click to edit" ) ;
            createTextAtPosition( "inlineID2", 150, 180, "click to edit" ) ;
2        }

        dojo.addOnLoad( test );
    </script>


</head>
<body>

        <div id="test"></div>

</body>
</html>

Change History

Changed 7 months ago by jeffg

  • version changed from 0.9 to 1.0

Changed 7 months ago by peller

  • owner set to bill

Changed 7 months ago by bill

  • milestone changed from 1.0.3 to 2.0

Changed 6 months ago by jeffg

A sufficient workaround is to position inlineEditBox into an absolute positioned div.

Changed 5 months ago by alex

  • milestone changed from 2.0 to 1.3

Milestone 2.0 deleted

Note: See TracTickets for help on using tickets.