10 Replies Latest reply on Dec 24, 2010 6:30 AM by tomaugerdotcom

    Spark forms <s:Form> labels do not line up, right-justified

    tomaugerdotcom Level 1

      This was the default for mx:Form, but does not seem to be working as expected in s:Form.


      Say you have a form:
      Name: [______________]
      Password: [________________]

      generally  you want Name and Password to line up on their right-hand side (right  justification). The length should be the length of the longest label.

      What's missing from the code below to make this line up as expected?

       

      <s:Form id="myForm" width="100%">                                              
             
      <s:layout>
                     
      <s:VerticalLayout horizontalAlign="justify"/>
             
      </s:layout>
             
      <s:FormItem label="Click">
                     
      <s:Button label="Button"/>
             
      </s:FormItem>
             
      <s:FormItem label="Root Directory">
                     
      <s:TextInput x="0" width="100%"/>
             
      </s:FormItem>
      </s:Form>

       

      Also, how can you get the textbox to fill the available area? It seems to stop at the boundary of the area reserved for "help" text. But what if there's no help text whatsoever in the entire form?

        • 1. Re: Spark forms <s:Form> labels do not line up, right-justified
          Shongrunden Adobe Employee

          You'll probably want to get rid of the VerticalLayout to get the layout you're expecting:

           

              <s:Form id="myForm" width="100%">                                             
                  <s:FormItem label="Click">
                      <s:Button label="Button"/>
                  </s:FormItem>
                  <s:FormItem label="Root Directory">
                      <s:TextInput x="0" width="100%"/>
                  </s:FormItem>
              </s:Form>

           

          If you look at the Form skin you will see that it uses a spark FormLayout.

          • 2. Re: Spark forms <s:Form> labels do not line up, right-justified
            tomaugerdotcom Level 1

            Yes, it's true. Removing the s:layout element from the s:Form container solves the problem, once you then apply a css stylesheet item to the formItem labels (it doesn't do it automatically as you have suggested, unlike mx:Form).

             

            However, this feels like a bug or an erroneous implementation of the spec.

             

            I don't understand why VerticalLayout, which applies to the Form container (NOT the FormItem container) should have an effect on a subcomponent of the FormItem container. It is my understanding that an s:layout declaration modifies the layout behaviour of its immediate parent container. This layout behaviour then should apply to the layout and formatting of the containers immediate children, but does not "cascade" down to its subsequent dependents.

             

            The label property is a child of FormItem (which should perhaps be better expressed as its own tag). Regardless, given the way the renderer treats this property, the label should not get any formatting cues from s:Form's s:layout declaration (other than possibly responding to any resizing of its parent FormItem container due to the inclusion of the alignment="justify" property within the s:layout declaration of the parent s:Form item, which causes its child FormItem containers to stretch to 100% of the width of the form.

             

            If my interpretation of the spec is way off base, I'd appreciate someone explaining to me the error of my ways. If not, can someone confirm that this is not the desired behaviour? I hate losing the ability to use s:Layout especially because of its justification feature.

             

            Thanks.

             

            T

            • 3. Re: Spark forms <s:Form> labels do not line up, right-justified
              Shongrunden Adobe Employee

              "Yes, it's true. Removing the s:layout element from the s:Form container solves the problem, once you then apply a css stylesheet item to the formItem labels (it doesn't do it automatically as you have suggested, unlike mx:Form)."

               

              >> Ah I think I see what you mean, the default spark Form label is aligned to the left, but in the mx Form its aligned to the right.  I'll see if I can find out why that change was made or if it's a bug.

               

              "However, this feels like a bug or an erroneous implementation of the spec."

               

              >> When you refer to the spec do you mean this page: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Form or another resource like ASDoc or the help pages?

               

              "I don't understand why VerticalLayout, which applies to the Form container (NOT the FormItem container) should have an effect on a subcomponent of the FormItem container. It is my understanding that an s:layout declaration modifies the layout behaviour of its immediate parent container. This layout behaviour then should apply to the layout and formatting of the containers immediate children, but does not "cascade" down to its subsequent dependents."

               

              >> Good question.  The FormLayout is a subclass of VerticalLayout so it lays out its immediate child elements (FormItems) in a vertical fashion with some default gap in between each element like you would expect.  But it also has some additional logic to gather information from the layouts of each of its child elements to figure out what size the columns should be.  After asking each element's FormItemLayout what column sizes it wants, it figures out the max column size and then tells each element's FormItemLayout what that size is.

               

              Let's take this simple form for example:

               

              First Name: [_________] ?
              Last Name: [__________] ?
              Favourite player's number: [__] ?
              

               

              The FormLayout would ask each element's FormItemLayout what size is the first column (the label)?  They would each reply with the size of their labels.  The FormLayout would then figure out that "Favourite player's number" is the biggest label and tell each FormItemLayout to make their labels the same size as that.

               

              This results in the size of each label being the same as the longest one:

               

              First Name:                [_________]  ?
              Last Name:                 [__________] ?
              Favourite player's number: [__]         ?

               

              If I am understanding correctly you want to have the Label's in the first column right aligned in that column like this:

               

                             First Name: [_________]  ?
                              Last Name: [__________] ?
              Favourite player's number: [__]         ?
              

               

              Currently it looks like you can do that either by creating a custom FormItemSkin and removing the left constraint on the labelDisplay:

               

              ...
              <s:Label id="labelDisplay"
                           fontWeight="bold" color="0x333333"
                           left="labelCol:0" right="labelCol:5"
                           bottom="row1:10" baseline="row1:0"/> 
              ...

               

              Or, like you mentioned, take advantage of the textAlign style using advanced CSS:

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark">
                  <fx:Style>
                      @namespace s "library://ns.adobe.com/flex/spark";
                      #form1 s|FormItem #labelDisplay
                      {
                          text-align: right;
                      }
                  </fx:Style>
                
                  <s:Form id="form1">
                      <s:FormItem label="Small">
                          <s:TextInput />
                      </s:FormItem>
                      <s:FormItem label="Long Form Item Text">
                          <s:TextArea />
                      </s:FormItem>
                  </s:Form>

               

              </s:Application>

              1 person found this helpful
              • 4. Re: Spark forms <s:Form> labels do not line up, right-justified
                tomaugerdotcom Level 1

                @Shongrunden - thanks for the continued dialogue. I am finding this very interesting.

                 

                >> When you refer to the spec do you mean this page: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Form or another resource like ASDoc or the help pages?

                 

                Yes, that's the one.

                 

                >> Currently it looks like you can do that either by creating a custom FormItemSkin and removing the left constraint on the labelDisplay.

                 

                Sounds complicated. I haven't yet broached customizing Spark skins yet. I want to master the default behaviours first. All in good time!

                 

                >> Or, like you mentioned, take advantage of the textAlign style using advanced CSS

                 

                Indeed. I guess my previous response as specifically regarding this. It appears that the CSS styling technique does not work when the s:Form container has been given an explicit vertical layout using s:layout (why is s:layout the only tag that starts with lower case?)

                 

                Is it because, since the s:Form item already inherits from VerticalLayout as you mentioned, there is some kind of conflict or edge condition that occurs when you explicitly (re)define the layout to vertical?

                 

                Since s:Form does inherit from VerticalLayout, if you want to take advantage of the align="justify" property of s:VerticalLayout can you just apply that property directly to the s:Form element? That would make sense to me.

                 

                I get that the s:Form needs to introspect its children to calculate max column width. I'm surprised that assigning width="100%" to the TextInput elements within a FormItem does not actually stretch the TextInput element to the full width of its container.

                 

                Thanks for the active participation!

                 

                Tom

                • 5. Re: Spark forms <s:Form> labels do not line up, right-justified
                  Shongrunden Adobe Employee

                  "Indeed. I guess my previous response was specifically regarding this. It appears that the CSS styling technique does not work when the s:Form container has been given an explicit vertical layout using s:layout (why is s:layout the only tag that starts with lower case?)"

                   

                  >> So the CSS is still working correctly (the label still has textAlign="right" applied), but since the FormItemLayout doesn't have a FormLayout to communicate with it doesn't know to make the label any wider than just enough to fit the text.  To simplify this a little bit, here is an example of what is happening outside the context of a Form:

                   

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark">

                      <s:Label text="Hello World" y="0"/>

                      <s:Label text="Hello World" textAlign="right" y="30" />

                      <s:Label text="Hello World" textAlign="right" width="500" y="60" />

                  </s:Application>

                   

                  Notice that the first two label's look identical since there is no width specified on the Label so the Label sizes to be just big enough to fit its text.  There is no extra space available for textAlign to position the text like in the third example.

                   

                  >> layout is a property of Form just like width or height, for example:

                   

                  <s:Form>

                      <s:width>100</s:width>

                      <s:height>100</s:height>

                      <s:layout>

                          <s:FormLayout />

                      </s:layout>

                      ...

                  </s:Form>

                   

                  width and height just take a primitive number value, but layout needs to be an object that extends the LayoutBase class.

                   

                  "Is it because, since the s:Form item already inherits from VerticalLayout as you mentioned, there is some kind of conflict or edge condition that occurs when you explicitly (re)define the layout to vertical?"

                   

                  >> Note that s:Form does not inherit from VerticalLayout, but rather its layout object does.  The separation of the component and its layout is one of the main features of the spark architecture.

                   

                  "Since s:Form does inherit from VerticalLayout, if you want to take advantage of the align="justify" property of s:VerticalLayout can you just apply that property directly to the s:Form element? That would make sense to me."

                   

                  >> See last note.  You can take advantage of the justify alignment, it works correctly, but I'm not sure that is actually what you are looking for.

                   

                  Instead of using VerticalLayout, just use FormLayout since it extends VerticalLayout:

                   

                  <s:Form>

                      <s:layout>

                          <s:FormLayout horizontalAlign="justify" />

                      </s:layout>

                   

                      <s:FormItem label="Short"><s:TextInput /></s:FormItem>

                      <s:FormItem label="A really long label"><s:TextInput /></s:FormItem>

                  </s:Form>

                   

                  I have built a sample application that demonstrates the sizes + positions of the different form elements.  Take a look at the attached files for some extra explanation.

                   

                  "I get that the s:Form needs to introspect its children to calculate max column width. I'm surprised that assigning width="100%" to the TextInput elements within a FormItem does not actually stretch the TextInput element to the full width of its container."

                   

                  >> Ah yes now I understand what you wanted to apply the justify to.  In order to do this by default I believe there needs to be a way to specify percentage sizes on a column itself.  Currently that is not supported.  Please vote for this bug if you would like it to be considered in the future: http://bugs.adobe.com/jira/browse/SDK-27964.

                   

                  If you don't mind getting rid of the help area you can write a custom skin to get the behavior you want.

                   

                  See attached CustomFormItemSkin.mxml and remember to apply it to each FormItem in your form.

                   

                  "Following up on default alignment"

                   

                  >> I asked why we left align the label by default in spark instead of right align like in mx.  This is not a bug and was a design decision from our experience design team based on their research of modern form designs.

                   

                  "Thanks for the active participation!"

                   

                  >> Thanks for your feedback.  Hopefully this gives you some insight into how things are working.

                   

                  1 person found this helpful
                  • 6. Re: Spark forms <s:Form> labels do not line up, right-justified
                    tomaugerdotcom Level 1

                    @Shongrunden - thanks again for the detailed information. This is extremely insightful and just the sort of information I need to feel engaged with the process. I have voted form the 100% bug, and am also excited to continue to explore my knowledge of Hero by examining and analysing your sample files. Thanks for taking the time to put all this together and I do hope this thread is useful to others. I will be updating similar posts on stackoverflow and experts-exchange to point to this link.

                     

                    It's engagement like this that builds customer loyalty and a fine example of how these forums can be a powerful learning tool. Thanks for your time!

                     

                    Tom

                    • 7. Re: Spark forms <s:Form> labels do not line up, right-justified
                      Shongrunden Adobe Employee

                      I think the last code sample I attached had the wrong skinClass set in the CSS.  Attached is an updated ZIP file.

                       

                      Thanks to you for taking the time to bring up your concerns. These conversations are very valuable to us on the Flex team.

                      • 8. Re: Spark forms <s:Form> labels do not line up, right-justified
                        tomaugerdotcom Level 1

                        Did you update the attachment in your earlier comment? Or was there supposed to be an attachment in your latest comment?

                        • 9. Re: Spark forms <s:Form> labels do not line up, right-justified
                          Shongrunden Adobe Employee

                          Oops, thanks for pointing that out.  It should be attached to this message.

                          • 10. Re: Spark forms <s:Form> labels do not line up, right-justified
                            tomaugerdotcom Level 1

                            The 100% width issue has been addressed and fixed in Hero Iteration 6

                            http://bugs.adobe.com/jira/browse/SDK-27964