3 Replies Latest reply on Mar 29, 2007 6:15 AM by peterent

    Problem with z-index in Flex

    Wimpie Level 1
      I have a problem setting the z-index in Flex.

      This is my main file:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:v="components.*">
      <mx:Form id="indiForm" width="100%">
      <mx:FormItem label="First field" required="true">
      <v:SuggestionBox id="indi_address2" width="200"/>
      </mx:FormItem>
      <mx:FormItem label="Second field" required="true">
      <mx:TextInput id="xxx" width="200"/>
      </mx:FormItem>
      <mx:FormItem label="Third field" required="true">
      <mx:TextInput id="yyy" width="200"/>
      </mx:FormItem>
      </mx:Form>
      </mx:Application>

      And this is SuggestionBox.mxml (which sits in the components directory):

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:TextInput id="a" width="100%" keyUp="init();"/>
      <mx:DataGrid id="b" visible="false" showHeaders="false" includeInLayout="false" maxHeight="100" minHeight="15" >
      <mx:columns>
      <mx:DataGridColumn dataField="col1"/>
      <mx:DataGridColumn dataField="col2" visible="false"/>
      </mx:columns>
      </mx:DataGrid>
      <mx:Script>
      <![CDATA[
      private function init():void {
      b.y=a.y+a.height+1;
      b.width=a.width;
      parent.parent.setChildIndex(this.parent, parent.parent.numChildren - 1);
      b.visible=true;
      }
      ]]>
      </mx:Script>
      </mx:Canvas>

      What happens is that as soon as I start typing, the field moves below all other fields. What I want is that the suggestion-datagrid moves ON TOP of the other fields (a higher Z-index). What am I doing wrong?
        • 1. Re: Problem with z-index in Flex
          peterent Level 2
          You have this SuggestionBox as part of a FormItem. And you want to move it ABOVE the Form, is that correct?

          Having the SuggestionBox with all those parent.parent things is going to get you into trouble. You'd be better off having the key stroke in the SuggestionBox TextInput field dispatch a custom event which would be picked up by the application. Then the application could move it as you needed.
          • 2. Re: Problem with z-index in Flex
            Wimpie Level 1
            >> Then the application could move it as you needed.

            If I move the suggestionbox to the front with setChildIndex in the main application, all that happens is that the suggestionbox becomes the LAST formitem on the form. It doesn't move on TOP of the other form items.
            • 3. Re: Problem with z-index in Flex
              peterent Level 2
              I'm not understanding what you want to do. The z-order is the depth - how one component stacks on top of another as if they were 3D objects. Like putting pieces of paper on top of each other. The one with the lowest depth (z index) is at the bottom.

              But now it sounds like you want arrange their order in the form container. If that's true, then your SuggestionBox should still dispatch and event. The Application, upon receiving this event, can tell the Form to change the SuggestionBox's childIndex to zero so it appears at the top of the Form.