Opened 7 years ago
Last modified 4 years ago
#18001 new defect
dnd/Mover fails to position auto-wrapped inline elements on first move
Reported by: | bicorn | Owned by: | |
---|---|---|---|
Priority: | undecided | Milestone: | 1.15 |
Component: | DnD | Version: | 1.9.3 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
When creating Moveables from inline (or inline-block) elements, the first Moveable after a line-wrap (on first move) is positioned before the line-wrap, that is after the end of previous line.
See minimal example below.
A simple fix is to set "position:absolute" AFTER obtaining margin box in Mover.js.
var m = domGeom.getMarginBox(this.node); s.position = "absolute"; // enforcing the absolute mode
However I'm not sure if this agrees with rest of code. The tests in dojo/tests/dnd/ seem to work.
Minimal example:
<?xml version="1.1" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="de-DE" lang="de-DE" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> html,body { margin: 0; border: 0; padding: 0; } #dndArea, .dndItem { border: 1px solid black; padding: 10px; margin: 3px; } #dndArea { position: relative; width: 30em; height: 20ex; background: yellow; overflow: hidden; } .dndItem { /*display: inline-block;*/ display: inline; background: red; } </style> <script> var dojoConfig = { baseUrl: "/dev/tests/libs/dojo/dojo", async: true }; </script> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" data-dojo-config="async: true"> </script> <script> require([ "dojox/lang/functional", "dojo/dom", "dojo/dom-construct", "dojo/dnd/Moveable", "dojo/domReady!" ],function( df, dom, domConstruct, Moveable, domReady ){ var poem = "Wer reitet so spät durch Nacht und Stille , " + "es ist der Uli mit einer Mille ." ; var dndArea = dom.byId("dndArea"); df.forEach( poem.split(/\s+/), function(word) { var div = domConstruct.create("div",{ class: "dndItem", innerHTML: word }); domConstruct.place(div, dndArea,"last"); domConstruct.place(document.createTextNode(" "), dndArea,"last"); new Moveable(div); }); }); </script> </head> <body> <div id="dndArea"></div> </body> </html>
Attachments (1)
Change History (3)
Changed 7 years ago by
Attachment: | MoverBug.html added |
---|
comment:1 Changed 5 years ago by
Milestone: | tbd → 1.12 |
---|
comment:2 Changed 4 years ago by
Milestone: | 1.13 → 1.15 |
---|
Note: See
TracTickets for help on using
tickets.
Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.