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 )
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)
Change History (9)
comment:1 Changed 11 years ago by
| Version: | 0.9 → 1.0 |
|---|
comment:2 Changed 11 years ago by
| Owner: | set to bill |
|---|
comment:3 Changed 11 years ago by
| Milestone: | 1.0.3 → 2.0 |
|---|
comment:4 Changed 11 years ago by
comment:6 Changed 11 years ago by
| Description: | modified (diff) |
|---|---|
| Milestone: | 1.3 → future |
| Priority: | high → normal |
| severity: | major → normal |
| Summary: | InlineEditBox fails to appear inline → InlineEditBox: fails to appear inline for absolutely positioned node |
comment:7 Changed 6 years ago by
| Milestone: | future → 1.9 |
|---|---|
| Priority: | high → low |
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
| Milestone: | 1.9 → 1.8 |
|---|---|
| Resolution: | → fixed |
| Status: | new → closed |
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.
A sufficient workaround is to position inlineEditBox into an absolute positioned div.