Erasing components on Canvas

Question

Hello people,

The problem is when background of top or below label is changed, the top or below button is erased.

<mx:Canvas width="100%" height="100%">
        <mx:LinkButton icon="{icon1}" width="25" x="10" y="10"/>
        <mx:LinkButton icon="{icon2}" width="25" x="10" y="100" />
    <s:VGroup width="100%" height="100%" id="lst" click="highlight(event.target as Label)" gap="0">
        <s:Label />
        <s:Label />
        <s:Label selected="true" />
        <s:Label />
        <s:Label creationComplete="fillList()"/>
    </s:VGroup>
</mx:Canvas>

    private function highlight(label:Label):void {
        setStyle("backgroundColor", "#DDDDDD");
    }

So do anyone know the possible solution for this problem?

Answer 1

You are sitting the VGroup on top of the buttons, so when you fill the background of a label, its obscuring the button.

If you reorder the components so that the buttons are sitting on top of the VGroup, this won't happen.

Literally put the VGroup before the buttons in the list of children in the Canvas.