text alignment when title wraps

[acarur01]

Is there a way to control the vertical alignment of fields in grid layouts? In the example below, one of the columns have its title wrapping but it pushes down the textfield and is no longer aligned with the other fields. Is there a way to force the dynamic form to align using the bottom of the fields instead of the top of the titles or whatever it is currently using for alignment?

isc.DynamicForm.create({
   ID: "DF",
   titleOrientation: "top",
   numCols: 4,
    fields: [
        {name: "username",
         title: "Username",
         type: "text",
         width: 124
        },
        {name: "Mother's Maiden Name",
         title: "Mother's Maiden Name",
         required: true,
         width: 124,
         type: "text"},
        {name: "password",
         title: "Password",
         type: "password",
         width: 124
        },
        {name: "password2",
         title: "Password again",
         type: "password",
         width: 124
        }
    ]
});

[Isomorphic]

Hi Arianne,
This is a good point.
We've added a feature to the 3.0 codepath - formItem.vAlign so you can set the vertical alignment of your items within their containing cells.
Setting vAlign:"bottom" on each item will therefore resolve this.

This will be available in 3.0 nightly builds going forward.

If you need a workaround in the meantime, you could put the titles in separate static text items in one row, with value items in the next row. Something like this:

isc.DynamicForm.create({
   ID: "DF",
   titleOrientation: "top",
   numCols: 4,
    fields: [
        // titles row:
        {type:"StaticTextItem", textBoxStyle:"formTitle", showTitle:false, value:"User Name:"},
        {type:"StaticTextItem", textBoxStyle:"formTitle",  showTitle:false, value:"<b>Mother's Maiden Name:</b>"},
        {type:"StaticTextItem", textBoxStyle:"formTitle",  showTitle:false, value:"Password:"},
        {type:"StaticTextItem", textBoxStyle:"formTitle",  showTitle:false, value:"Password again:"},
        // values row
        {name: "username",
         showTitle:false,
         type: "text",
         width: 124

        },
        {name: "MothersMaidenName",
         showTitle:false,
         required: true,
         width: 124,
         type: "text"},
        {name: "password",
         showTitle:false,
         type: "password",
         width: 124
        },
        {name: "password2",
         showTitle:false,
         type: "password",
         width: 124
        }
    ]
});

Also a side note -- the form item name "Mother's Maiden Name" was obviously used for illustration purposes here, but we'd recommend you avoid spaces and special chars (like apostrophe) in form item names.

[acarur01]

Ah, yes "Mother's Maiden Name" is just the title - the actual field with that label contains proper naming conventions.

When you say 3.0 codepath, what exactly is that? I have 8.0 build streams and 8.1

[Isomorphic]

Sorry - my mistake - I was using SmartGWT version naming.

By 3.0 I meant the 8.x builds available here: http://www.smartclient.com/builds

[acarur01]

Is it at all possible to add this to 8.1 - I understand it is an enhancement and not necessarily a bug fix - the customer needing this behaviour is about to go into UAT and the workaround is not feasible for this because it exists in many different form layouts.

[Isomorphic]

We've ported across to the 8.1 branch. It'll be present in the next nightly build.

[acarur01]

Thank you!

[acarur01]

Tested the new property and it works. Just wondering though, it would be convenient if the property could be an overall control on the dynamic form instead of having to set it on every field in the form - this causes quite a bit of added text in the generated js.