Opened 11 years ago

Closed 6 years ago

#5494 closed defect (fixed)

InlineEditBox: fails to appear inline for absolutely positioned node

Reported by: jeffg Owned by: bill
Priority: low Milestone: 1.8
Component: Dijit Version: 1.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

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>

Attachments (1)

ieb.html (1.2 KB) - added by bill 6 years ago.
updated test case including dijit.css

Download all attachments as: .zip

Change History (9)

comment:1 Changed 11 years ago by jeffg

Version: 0.91.0

comment:2 Changed 11 years ago by Adam Peller

Owner: set to bill

comment:3 Changed 11 years ago by bill

Milestone: 1.0.32.0

comment:4 Changed 11 years ago by jeffg

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

comment:5 Changed 11 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:6 Changed 11 years ago by bill

Description: modified (diff)
Milestone: 1.3future
Priority: highnormal
severity: majornormal
Summary: InlineEditBox fails to appear inlineInlineEditBox: fails to appear inline for absolutely positioned node

comment:7 Changed 6 years ago by bill

Milestone: future1.9
Priority: highlow

Starting with 1.8, it's positioned in the right place, but for some reason for this test case the display text isn't getting hidden when the editor is shown.

comment:8 Changed 6 years ago by bill

Milestone: 1.91.8
Resolution: fixed
Status: newclosed

Oh, it was just that the test file didn't include dijit.css (directly or indirectly). After that the display node properly disappears on edit. So, this was fixed in 1.8.

Changed 6 years ago by bill

Attachment: ieb.html added

updated test case including dijit.css

Note: See TracTickets for help on using tickets.