wrapping labels in tilegrid

[acarur01]

Is there any way to wrap the label for commonName for example? Usually we just set wrap to true and the value automatically wraps to the next line.

isc.TileGrid.create({
    tileWidth:150,
    tileHeight:190,
    height:400,
    width:"100%",
    showAllRecords:true,wrapCells:true,
    data:animalData,
    fields: [
        {name:"picture",  
            type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
        {name:"commonName",wrap:true}
        
    ]            
});

data:

animalData = [
    {
        picture:"Elephant.jpg", 
        commonName:"Elephant (African) User Profile Management", 
        information:"The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat.", 
        lifeSpan:60, 
        scientificName:"Loxodonta africana", 
        diet:"Herbivore", 
        status:"Threatened" 
    }, 
    {
        picture:"Alligator.jpg", 
        commonName:"Alligator (American)", 
        information:"In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called \"el largo\" meaning \"the lizard\". The name \"el largo\" gradually became pronounced \"alligator\".", 
        lifeSpan:50, 
        scientificName:"Allligator mississippiensis", 
        diet:"Carnivore", 
        status:"Not Endangered"
    }, 
    {
        picture:"AntEater.jpg", 
        commonName:"Anteater", 
        information:"Anteaters can eat up to 35,000 ants daily. Tongue is around 2 feet long and is not sticky but rather covered with saliva. They have very strong sharp claws used for digging up anthills and termite mounds.", 
        lifeSpan:25, 
        scientificName:"Myrmecophaga tridactyla", 
        diet:"Ground dwelling ants/termites", 
        status:"Not Endangered" 
    }
   
];

[Isomorphic]

We're not in direct control of this, but setting CSS word-wrap : break-word; in the titleStyle should force wrapping.

[acarur01]

I tried setting the titleStyle but it is still not wrapping:

isc.TileGrid.create({
    tileWidth:150,
    tileHeight:190,
    height:400,
    width:"100%",titleStyle:"myHighGridCell",
    showAllRecords:true,wrapCells:true,
    data:animalData,
    fields: [
        {name:"picture",  
            type:"image", imageURLPrefix:"/isomorphic/system/reference/inlineExamples/tiles/images/"},
        {name:"commonName",wrap:true,titleStyle:"myHighGridCell"}
        
    ]            
});


.myHighGridCell,
.myHighGridCellDark {
    font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
    color:black;
    border-bottom:1px solid #ffc0c0; border-top:1px solid #ffc0c0;
    background-color:#ffc0c0;
   word-wrap:break-word;
}

[acarur01]

I tried setting tileProperties as well but still doesn't work:

tileProperties:[{titleStyle:"myHighGridCell"}]

[Isomorphic]

Ah - looks like we misunderstood your intention here. You should be able to achieve this by setting 'wrapValues' to true on your tileGrid.

Let us know if that doesn't fix it

Regards
Isomorphic Software

[acarur01]

Yup that fixes the issue. Thanks

[acarur01]

Please run style.html. I'm trying to get the labels to appear at the top left corner of the tile but the control continues to put them right in the center. How do I modify this? When I look in firebug I see the following..not sure where text-align centre is coming from

<td class="cwAppLabel" nowrap="" style="overflow:hidden;text-align:center;">
<nobr>Elephant (African)</nobr>
</td>

[acarur01]

Also, I realized tileStyle is marked as IR - is it possible to have different styles per tile? Do I do this in getTile() method?

[acarur01]

Disregard this question - I found getCellStyle. The other question with the example I still would like an answer to. Thanks!

Also, I realized tileStyle is marked as IR - is it possible to have different styles per tile? Do I do this in getTile() method?

[acarur01]

Perhaps my last two posts were confusing? Please give some feedback. Thanks.

Please run style.html. I'm trying to get the labels to appear at the top left corner of the tile but the control continues to put them right in the center. How do I modify this? When I look in firebug I see the following..not sure where text-align centre is coming from

<td class="cwAppLabel" nowrap="" style="overflow:hidden;text-align:center;">
<nobr>Elephant (African)</nobr>
</td>

[acarur01]

I have modified the sample so that the text vertical alignment is set to top but the text-align: left still does not work - it gets overwritten by element.style.

I used 10-09-2012 8.2p build to test.

It's been 6 days since I posted this question and I am still not getting any feedback from you guys..what's wrong?

[Isomorphic]

Sorry for the delay in responding. We are looking at this - expect an update today.

[Isomorphic]

The attribute tileValueAlign governs the alignment of the contents of the tile. Set this to "left" to show content at the left of each tile.
It looks like you already resolved the issue with per-cell styling. Please let us know if there are any other questions on this

Thanks
Isomorphic Software

[acarur01]

Works perfectly, thanks