Titles are not horizontally in the same position

[pavo123]

Hi Isomorphic,

Please see my 4 test cases.
The problem in each case is the same: Titles are NOT horizontally in the same position.
I added a horizontal black line to photo, to see the difference.


Sometimes the difference is smaller (test case 1 and 2) and sometimes bigger (test case 3 and 4).
But I expect that titles are always horizontally in the same position.

SmartClient Version: v12.0p_2020-03-08/AllModules Development Only (built 2020-03-08)

isc.DynamicForm.create({
    ID: "contactForm",
    width: 50,
    numCols: 4,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type:"CheckboxItem", value:"true", required:true
},
        { name: "Test2", title: "Test2", type: "TextItem", value:"1"}
    ]
});

isc.DynamicForm.create({
    ID: "contactForm2",
    top:100,
    titleOrientation:"top",
    width: 50,
    numCols: 4,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type:"CheckboxItem", value:"true", required:true, labelAsTitle:true
},
        { name: "Test2", title: "Test2", type: "TextItem", value:"1"}
    ]
});


isc.DynamicForm.create({
    ID: "contactForm3",
    top:200,
    titleOrientation:"top",
    width: 50,
    numCols: 4,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type:"CheckboxItem", value:"true", required:true, labelAsTitle:true
},
        { name: "Test2", title: "Test2", type: "StaticTextItem", value:"1"}
    ]
});

isc.DynamicForm.create({
    ID: "contactForm4",
    top:300,
    titleOrientation:"top",
    width: 50,
    numCols: 4,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    fields: [
        { name: "Test1", title: "Test1", type:"CheckboxItem", value:"true", required:true, labelAsTitle:true
},
        { name: "Test2", title: "Test2", type: "StaticTextItem", value:"1"}
    ]
});

Best
Pavo

[Isomorphic]

Apologies for the silence on this one - we're taking a look and will update when we have feedback.

[Isomorphic]

The first image may be a simple css line-height issue, depending on the skin you were using (Tahoe?) - but we're not overly concerned about that one.

The other issues were due to the difference in height of the various FormItems and the HTML we script when titleOrientation is "top"- title and item in a div that's v-centered in its cell. You can see this very clearly if you show a tall item, like a TextAreaItem, next to s StaticTextItem (which is less tall than all other items).

We added FormItem.getVAlign() which, by default, returns "top" if titleOrientation is "top" - so all titles are v-aligned with each other, with formItems top-aligned beneath them.

You can try the changes in builds dated March 19 and later.

[Blama]

Hi Isomorphic,

looking crisp now using v12.0p_2020-03-19:

isc.DynamicForm.create({
    ID: "contactForm",
    width: 50,
    numCols: 6,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type:"CheckboxItem", value:true, required:true},
        { name: "Test2", title: "Test2", type: "TextItem", value:"1"},
        { name: "Test3", title: "Test3", type: "TextAreaItem", value:"1"}
    ]
});

isc.DynamicForm.create({
    ID: "contactForm2",
    top:150,
    titleOrientation:"top",
    width: 50,
    numCols: 6,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type: "CheckboxItem", value:true, required:true, labelAsTitle:true},
        { name: "Test2", title: "Test2", type: "TextItem", value:"1"},
        { name: "Test3", title: "Test3", type: "TextAreaItem", value:"1"}
    ]
});


isc.DynamicForm.create({
    ID: "contactForm3",
    top:300,
    titleOrientation:"top",
    width: 50,
    numCols: 6,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    requiredTitleSuffix: "&nbsp;(*):</b>",
    fields: [
        { name: "Test1", title: "Test1", type: "CheckboxItem", value:true, required:true, labelAsTitle:true},
        { name: "Test2", title: "Test2", type: "StaticTextItem", value:"1"},
        { name: "Test3", title: "Test3", type: "TextAreaItem", value:"1"}
    ]
});

isc.DynamicForm.create({
    ID: "contactForm4",
    top:450,
    titleOrientation:"top",
    width: 50,
    numCols: 6,
    backgroundColor: "yellow",
    hiliteRequiredFields: true,
    fields: [
        { name: "Test1", title: "Test1", type: "CheckboxItem", value:true, required:true, labelAsTitle:true},
        { name: "Test2", title: "Test2", type: "StaticTextItem", value:"1"},
        { name: "Test3", title: "Test3", type: "TextAreaItem", value:"1"}
    ]
});

Thank you & Best regards
Blama