How can I change create gaps between tiles in a Flex Tile list or the width of a hover image so you can see the background image inbetween items

Question

I have created a tile list with custom item renderer and in terms of functionality it works as it should. I reduced the width and height of the item renderer to 95% which then shows the tile lists background in the remaining 5% of that item. The problem is that only when I hover over the item, the background is covered up and I cant get a gap to appear between items. Is it possible to change the height and width of the hover over? Am I missing something simple?

<mx:Canvas id="Card2" label="Card2" width="100%" height="100%" backgroundColor="#FFFFFF">
    <mx:TileList id="tlCard2" x="10" y="10" dataProvider="{acCard2}" width="580" height="340" dropEnabled="true" borderThickness="0" maxColumns="4" maxRows="4" rowHeight="85" columnWidth="145" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" dragMoveEnabled="true" dragEnabled="true" backgroundImage="{imgGuide}" themeColor="#BCBCBC">
        <mx:itemRenderer>
            <mx:Component>                          
                <mx:Image source="{assets/' + data.imageId + '.jpg'+ '?cachekill=\'' + new Date()}" horizontalAlign="center" verticalAlign="middle" width="95%" height="95%" scaleContent="false" maintainAspectRatio="true"/>                              
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Canvas>

Thanks in Advance! :)

score 2 · Accepted Answer · answered Jun 20 '11 at 15:27

2

for spark components you have autoDrawBackground="false"

Try http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/

for mx try useRollOver = false

Try http://blog.flexexamples.com/2008/02/01/disabling-item-roll-over-highlighting-in-the-flex-datagrid-control/

answered Jun 20 '11 at 15:27

Ravi

578
1
5
15

This stops the default hover appearing which is a start, however I need the image itself to appear differently when the curser goes over the top. It doesn't matter if it is increasing the alpha or adding a tint of some kind. Any ideas how I can do this? – Michael Wilson Jun 21 '11 at 12:14

score 2 · Answer 2 · answered Jun 21 '11 at 19:25

2

TileList inherits paddingTop paddingBottom attributes setting those should do it.

Another thing you can try is setting the rowHeight of the TileList and the set the height of the itemRenderer to a value less then the rowHeight

answered Jun 21 '11 at 19:25

The_asMan

6,364
4
23
34

score 1 · Answer 3 · answered Jun 20 '11 at 15:25

1

I think you should play with padding styles family.

answered Jun 20 '11 at 15:25

Constantiner

14,231
4
27
34

How can I change create gaps between tiles in a Flex Tile list or the width of a hover image so you can see the background image inbetween items

3 Answers3