BUG - tileGrid.tileDragAppearance == "target" renders ugly tracker for Canvas tiles

Hi,

Bug can be verified in showcase with following code:

Code:

isc.TileGrid.create({
    ID: "testList",
    width: 500,
    height: 400,
    tileWidth:150,
    tileHeight:170,
    tileConstructor: "Canvas",
    tileProperties: {
      getInnerHTML: function() {
        var html = '<div style="background: blue">abc</div>';
        return html;
      }
    },
    data: [
         {
            picture:"Camel.jpg",
            commonName:"Arabian Camel",
            information:"Can eat any vegetation including thorns. Has one hump for fat storage. Is well known as a beast of burden.",
            lifeSpan:50,
            scientificName:"Camelus dromedarius",
            diet:"Herbivore",
            status:"Not Endangered"
         },
        {
            picture:"BaldEagle.jpg",
            commonName:"Bald Eagle",
            information:" Females lay one to three eggs. Visual acuity is 3-4 times greater than a human. Bald eagles build the largest nest of any North American bird. The largest nest found was 3.2 yds (2.9 m) in diameter and 6.7 yds (6.1 m) tall. Protection of the Bald Eagle is afforded by three federal laws: (1) the Endangered Species Act, (2) the Bald Eagle and Golden Eagle Protection Act, and (3) the Migratory Bird Treaty Act.",
            lifeSpan:50,
            scientificName:"southern subspecies: Haliaeetus leucocephalus leuc",
            diet:"Carnivore",
            status:"Endangered"
        },
        {
            picture:"BlackSpiderMonkey.jpg",
            commonName:"Black Spider Monkey",
            information:"They can perform remarkable feats with their tails.",
            lifeSpan:20,
            scientificName:"Ateles panicus",
            diet:"Herbivore",
            status:"Not Endangered"
        }
    ],
    canAcceptDroppedRecords: true,
    canDragTilesOut: true,
    canReorderTiles: true,
    tileDragAppearance: "target",
    fields: [
    {name:"picture", type:"image", imageURLPrefix:"../inlineExamples/tiles/images/"},
    {name:"commonName"}
    ]
});

When you try to drag a tile, tracker is renderect incorrectly. Instead of keeping dimensions of the tile, it is just a size of tile.getInnerHTML.

Bug is in TileGrid.dragMove in line

Code:

var trackerHTML = "<div style='width:" + tile.getVisibleWidth() +
                            ";height:" + tile.getVisibleHeight() + "'>" +
                            tile.getInnerHTML() + "</div>";

Width and height should be specified with units in CSS, so it should be something like:

Code:

var trackerHTML = "<div style='width:" + tile.getVisibleWidth() +
                            "px;height:" + tile.getVisibleHeight() + "px'>" +
                            tile.getInnerHTML() + "</div>";

The same is wrong for tileDragAppearance == "outline".

Best regards,
Janusz

Announcement