2 Replies Latest reply on Sep 8, 2009 12:51 PM by frogman.pep

    Layout Question

    frogman.pep Level 1

      Why is there a space between the Menubar and TileList as shown in the image below:

       

      ScreenShot.jpg

      Is there any way to get rid of that space?  Thanks for any replies.

       

      The MenuBar's id is menuList and the TileList's is picThumbnails in the code below:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas  xmlns:mx="http://www.adobe.com/2006/mxml"
         xmlns:comp="components.*"   
         creationComplete="init()"
         verticalScrollPolicy="off"
         horizontalScrollPolicy="off">
          
       <mx:Script source="../as/pics.as"/>
       
       <mx:Style>
        .myStyle {      
            opaqueBackground: #B7BABC;
         dropShadowEnabled: false;
        }
       </mx:Style> 
       <mx:constraintColumns>
        <mx:ConstraintColumn id="col1" width="33%"/>
        <mx:ConstraintColumn id="col2" width="33%"/>
        <mx:ConstraintColumn id="col3" width="34%"/>
        
       </mx:constraintColumns>
          
       <mx:constraintRows>  
        <mx:ConstraintRow id="row1" height="68%"/>  
        <mx:ConstraintRow id="row2" height="32%"/>
        
        </mx:constraintRows>
       <mx:states>
        <mx:State name="picDetails" id="picDetailsState">
         <mx:AddChild>
          <mx:Panel title="{selectedPic.title}"
             backgroundColor="black"      
             horizontalAlign="center"
             verticalAlign="middle"
             borderThicknessTop="-5"
             borderThicknessBottom="0"
             paddingTop="0"
             top="row1:0"
             bottom="row1:20"
             right="col3:0"
             left="col2:0"
             id="panel1"
             height="100%"
             width="100%">
           <mx:Image id="picState"
              scaleContent="true"/>     
          </mx:Panel>   
         </mx:AddChild>   
         <mx:AddChild position="lastChild">
          <mx:Panel  id="descPanel"
             left="col1:0" right="col1:0"
              bottom="row2:0" top="row2:10"        
              title="Picture Description"        
              controlBarStyleName="myStyle">
           <mx:Text  width="100%" height="65%"
               text="{descriptionText}"
               fontSize="16"
               color="#040404">      
           </mx:Text>     
           <mx:Text  text="Picture Number: {picturenumberText}"
               width="100%" height="35%"                           
               fontSize="18"/>
          </mx:Panel>
         </mx:AddChild>   
        </mx:State>
        <mx:State name="slideShow">
         <mx:AddChild>
          <comp:SlideShow x="0" height="100%" y="0" width="100%"/>     
         </mx:AddChild>
        </mx:State>
       </mx:states>
       <mx:VBox id="menuVBox"
          bottom="row2:0"
          right="col3:0"
          left="col2:0"
          top="row2:10">     
         <mx:MenuBar id="menuList"
           labelField="label"    
           click="{topMenuClick(event)}"
           itemClick="{menuClick(event)}"
              dataProvider="{menuData}"
              fontSize="16"
              width="85%"/>
        <mx:TileList id="picThumbnails"
            width="100%"
            height="100%"
            columnCount="4"
            rowCount="2"      
            dataProvider="{tileData}"
            change="displayPicDetails(event)"
            backgroundColor="black"
            itemRenderer="components.PicsDisplay"
            mouseWheel="onMouseWheel(event)"/>
       </mx:VBox>
      </mx:Canvas>