5 Replies Latest reply on Jul 21, 2011 6:47 AM by broconne

    Vertical centering in Spark/Flex

    broconne

      I am horizontally dividing my panel between two elements.

      To acheive that I am using the following layout controls

           <s:layout>          
                <s:HorizontalLayout>
                   <s:paddingBottom>20</s:paddingBottom>     
                   <s:paddingTop>50</s:paddingTop>
                   <s:paddingLeft>20</s:paddingLeft>
                   <s:paddingRight>20</s:paddingRight>
                   <s:gap>300</s:gap>
                </s:HorizontalLayout>          
           </s:layout>
      

       

      This is splitting the panel correctly on the horizonal front.

       

      However, I am then trying to center my other components vertically within the panel and am failing.  My non-spark component seems to center perfectly using the following:

           <mx:VBox verticalGap="20" horizontalAlign="center">
                </mx:VBox>
      

       

      However, when I add a second panel I can't seem to figure out how to center it vertically.  I am using the following code:

      <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" horizontalCenter="0" verticalCenter="0">
           <s:layout>
           <s:VerticalLayout>
              </s:VerticalLayout>     
           </s:layout>
      </s:Panel>
      
      
      Any advice on how to verticaly center that second panel is welcome.
      
      
      

        • 1. Re: Vertical centering in Spark/Flex
          _spoboyle Level 4

          you vertically center in a horizontal layout by using verticalAlign="middle"

           

          if you paste the whole file I'll try and fix it for you

          1 person found this helpful
          • 2. Re: Vertical centering in Spark/Flex
            UbuntuPenguin Level 4

            Error


             

            Message was edited by: UbuntuPenguin

            • 3. Re: Vertical centering in Spark/Flex
              UbuntuPenguin Level 4

              Nevermind, thought you had a double layout declaration in your component, it's been a slow day.

               

              Have you tried specifying the horizontal and vertical alignment properties of your VerticalLayout ?  One thing that always gets me when something isn't centered correctly is that the component generally has to be 100% of the size of the parent.  Otherwise your component will only take up a corner of the parent, then it will center based on that offset.  There is no shame in using a BorderContainer to find out exactly where your components are ending and beginning.

              1 person found this helpful
              • 4. Re: Vertical centering in Spark/Flex
                broconne Level 1

                UbuntuPenguin and _spoboyle -

                   Thanks for the help.  Setting the verticalAlign to middle and height to 100% seemed to mostly solve the issue.

                That seems to line up the VBox and the Panel..  However, when I place an object into the panel that object isn't centered vertically within that panel.  I have a mouse listener on the images in the VBox and when you click one it removes it from the VBox and adds it to the panel.  The VBox recenters everything correctly, but the moved object is not centered.

                 

                <s:Panel verticalCenter="0" id="mainPanel" visible="true" width="100%" height="100%" backgroundColor="0x000000" creationComplete="hidePanelHeader(event)">
                     <s:layout>          
                          <s:HorizontalLayout>
                               <!--
                             <s:paddingBottom>50</s:paddingBottom>     
                             <s:paddingTop>50</s:paddingTop>
                             <s:paddingLeft>20</s:paddingLeft>
                             <s:paddingRight>20</s:paddingRight> -->
                             <s:gap>300</s:gap>
                             <s:verticalAlign>middle</s:verticalAlign>
                          </s:HorizontalLayout>          
                     </s:layout>
                     
                     
                     <mx:VBox backgroundColor="0xFFFFFF" height="100%" verticalGap="20" verticalAlign="middle">
                               
                          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
                          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
                          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
                          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p71" creationComplete="blinkP7Disk(p71)" mouseDown="exploreNode(p71)"/>                              
                          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p72" creationComplete="blinkP7Disk(p72)"/>
                          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p73" creationComplete="blinkP7Disk(p73)"/>
                     </mx:VBox>
                     
                     
                     <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)"  height="100%">
                          <s:layout>
                               <s:VerticalLayout>
                                    <s:verticalAlign>middle</s:verticalAlign>
                                    <s:gap>20</s:gap>
                               </s:VerticalLayout>     
                          </s:layout>
                          
                     </s:Panel>
                     
                </s:Panel>
                

                • 5. Re: Vertical centering in Spark/Flex
                  broconne Level 1

                  Tried several layout modifications to the panel with id nodeExplorer in the code pasted above..  However, when I add a new object, it is never centered vertically.  It is rough 1/3 further down the screen than center.  Any suggestions?