3 Replies Latest reply on Jul 21, 2009 8:59 AM by Gregory Lafrance

    Form-Form Item Alignment Issue

    GG_81

      Hi,

           I am facing one minor issue regarding the label alignment issue in the formItem. I'm pasting the image as well as code snippet.form_image.JPG

       

      Code Snippet

       

      <mx:VBox id="Vboxid" width="100%" height="35%" paddingLeft="20">
              <mx:Spacer height="2%"/>
              <mx:Panel width="55%" height="28%" title="User Details" paddingTop="10">
              <mx:Form>
                  <mx:HBox>
                      <mx:FormItem label="UserName: " letterSpacing="2" fontSize="11" fontFamily="Arial">
                      <mx:TextInput id="uname" width="100%"/>
                  </mx:FormItem>
                 
                  <mx:FormItem label="Select account type: " letterSpacing="1" paddingLeft="10" fontSize="11" fontFamily="Arial" >
                      <mx:ComboBox id="accCombo" dataProvider="{accountTypes.children()}" change="loadCompanyInfoModule();" >
                         
                      </mx:ComboBox>
                  </mx:FormItem>
                 
                  </mx:HBox>
                 
                  <mx:VBox>
                             
                  <mx:FormItem label="Password: " letterSpacing="2" paddingTop="30" fontSize="11" fontFamily="Arial">
                      <mx:TextInput id="password" width="100%" displayAsPassword="true"/>
                  </mx:FormItem>
                 
                  <mx:FormItem label="Retype Password: " letterSpacing="2" paddingTop="30" fontSize="11" fontFamily="Arial">
                     
                      <mx:TextInput id="password1" width="100%" displayAsPassword="true"/>
                  </mx:FormItem>
                  </mx:VBox>
              </mx:Form>
              </mx:Panel>
          </mx:VBox>   

       

       

      Here you can see in the image Retype Password, textinput is not properly aligned. Username and password textinput are coming in a proper aligned way one below the another but its not happening in the case of Retype password.

       

      Please help me.

       

      Thanxs

       

      Gaurav

        • 1. Re: Form-Form Item Alignment Issue
          Gregory Lafrance Level 6

          I think this is a better way to implement your UI:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Spacer height="2%"/>
            <mx:Panel width="55%" height="28%" title="User Details" paddingTop="10">
              <mx:Form>
                <mx:FormItem label="Select account type: " letterSpacing="1"
                  fontFamily="Arial" >
                    <mx:ComboBox id="accCombo" />
                </mx:FormItem>
                <mx:FormItem label="UserName: " letterSpacing="2" fontSize="11"
                  fontFamily="Arial">
                  <mx:TextInput id="uname" width="100%"/>
                </mx:FormItem>
                <mx:FormItem label="Password: " letterSpacing="2"
                  paddingTop="30" fontSize="11" fontFamily="Arial">
                  <mx:TextInput id="password" width="100%" displayAsPassword="true"/>
                </mx:FormItem>
                <mx:FormItem label="Retype Password: " letterSpacing="2"
                  paddingTop="30" fontSize="11" fontFamily="Arial">
                  <mx:TextInput id="password1" width="100%"
                    displayAsPassword="true"/>
                </mx:FormItem>
              </mx:Form>
            </mx:Panel>
          </mx:Application>

          If this post answers your question or helps, please mark it as such.

          • 2. Re: Form-Form Item Alignment Issue
            GG_81 Level 1

            Hi,

                 Please check the image. I want Username and ComboBox horizontally tht's y i hav used HBox. For password and Retype password i have used VBox for alignment. Please go through my code and do the modification accordingly..

             

            I have checked your code, it's working fine as you are putting everything vertically without any HBox and VBox.

             

             

            Thanxs

             

            Gaurav

            • 3. Re: Form-Form Item Alignment Issue
              Gregory Lafrance Level 6

              I think the key is that what you are trying to do is not possible using the containers you are using.

               

              You might achieve what you want using an HBox and within that a Form and another HBox (that has the label and combobox).