text align vertical

[acarur01]

I can't find any properties that will allow me to control the vertical alignment of a text area (or text field) - I tried setting it via css but it does not make a difference. Basically, I want to align the text value to centre instead of the top.

isc.DynamicForm.create({
    width: 300,
    fields: [
        {title:"Description", type:"textArea", defaultValue:"Test", textBoxStyle:"myBoxedGridCell"} 
    ]
});


.myBoxedGridCell {
    font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px;
    color:red;
    vertical-align: bottom;
}

[Isomorphic]

This is something of a native limitation of HTML.
We don't support this via a simple flag since TextArea elements in HTML don't support this feature via CSS.

If you specify a tall height on a simple TextItem you'll see that text is centered vertically by default, which may give you what you're after - but this won't allow wrapping of your entered text of course.

Is this a hard requirement for your application? Can you give us an idea of what the overarching UI you're trying to achieve that needs this?

[acarur01]

I've attached a screenshot of some AutoFitTextArea's that we are having issues with - as you can see the alignment of the titles are centered (bottom fields), but the text is on top which makes the UI messy.

[Isomorphic]

Since you're using an AutoFitTextAreaItem, if you just size the height of the item to be small by default, the text box should be vertically aligned to match the title within the DynamicForm table cell.
As the user enters multiple lines of text, the text box as a whole will expand vertically but remain centered.

[acarur01]

We've tried this before - setting the height to default 1px but then we need up having inconsistencies such as the screenshot attached where when another field "Address" increases in height, it affects "N-rTx$". At least with our default heigh of 22px, the field border looks like it is aligned like a regular text field.

[Isomorphic]

This is odd - we're seeing the alignment looking ok in our simple tests.
The attached screenshot shows what we got from pasting

isc.DynamicForm.create({
    numCols:4,
    items:[
        {name:"item1", editorType:"AutoFitTextAreaItem", height:1},
        {name:"item2", editorType:"AutoFitTextAreaItem", height:1}
    ]
});

into the feature explorer in the latest (8.2) package.

Try it out and see if you get the same behavior!
If you do, the issue may be to do with the css applied to the item or similar.
If you can't figure it out (or continue to see the behavior with this snippet), can you put together a test case that shows the bad bahavior, and be sure to include
- exact version you're running
- browser / OS you're seeing this in
- whether you have any doctype specified at the top of your html file
- any custom CSS that applies to the form / elements in question.

[acarur01]

hmm ok - I'll try to get a standalone working - We do have css on the fields but I tried using this in your standalone and it looked fine.

[acarur01]

I found the issue with my testcase - I had vAlign set to "bottom" for the fields - I only really need this property if the labels are on top of the field - once I fixed this, the workaround is good