1 Reply Latest reply on Aug 29, 2006 7:40 PM by peterent

    Form Item Label Alignment

    Josh Johnson Level 1
      In my current application I have a bunch of forms with each having sets of form items, like so:

      <mx:Form id="theForm">
      <mx:FormItem id="formName" label="Name:" width="100%">
      <mx:TextInput id="formNameText" text="Epsilon"/>
      </mx:FormItem>
      <mx:FormItem id="formDesc" label="Name:" width="100%">
      <mx:TextArea id="formDescText" text="Lorem ipsum dolar sit amet"/>
      </mx:FormItem>
      </mx:Form>

      That's all fine, but by default all of the label text is displayed as right aligned. I'd like to change this to left aligned, but I'm not finding a way. I've tried textAlign on the Form, and both textAlign and horizontalAlign on the FormItem, all to no effect. I've gone through the language reference for FormItems and found the FormItemLabel object, which is supposed to support textAlign, but setting that in CSS did nothing. Is there a property somewhere that controls this, or do I have no choice but to rebuild everything as absolutely positioned elements and dump the form?
        • 1. Re: Form Item Label Alignment
          peterent Level 2
          The only way for you to do this is to create your own extension class of FormItem. Form and FormItem are deliberately rigid in this sense; it is the purpose of the Form to align the labels this way. The MXML Form container, unlike an HTML form, doesn't have any special meaning beyond the layout.

          If you don't want to extend the FormItem class, then use the Grid (not DataGrid) container and align things as you like. Think of the Grid as the equivalent to HTML <table> tag.

          If you have Flex Builder 2, making a Grid in design mode will be much easier than hand coding it.