Dynamic Form with different formTitle orientations

[Developer12145]

Hi Isomorphic,

please see this testcase:

isc.DynamicForm.create({
    ID: "dateForm",
    width: 500,
    fixedColWidths: true,
    titleAlign: "left", 
    canEdit: false,
   numCol: 2,
    clipItemTitles: true,
    clipStaticValue: true,
    colWidths: [100, "*"],
    width: "100%",
    isGroup: true,

    ReadOnlyDisplayAppearance: "static",
    groupTitle: "Date Controls",
    fields : [{
        name: "dateItem", title: "Date",
        editorType: "DateItem"
    },
    {
        name: "dateItem2", title: "Date", 
        editorType: "DateItem",
        useTextField: true
    },
     {
        name: "spinnerItem", title: "Spinner",
        editorType: "SpinnerItem",

    },
    {
        name: "dateTimeItem", title: "Datetime", 
        editorType: "DateTimeItem", type: "datetime",
        useTextField: true
    },

    {
        name: "timeItem2", title: "Time", 
        editorType: "TimeItem",
        useTextField: false
    },

    {
        name: "mdri", title: "Mini Date Range", 
        editorType: "StaticTextItem",
       value: "You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to the server as needed, while the user spell               checks through the text.You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to the server as needed, while           the user spell checks through the text.You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to the server as             needed, while the user spell checks through the text.You can spell check very long text areas without compromising any performance hits. Regardless of the size of the text, UltimateSpell only sends small portions of the text to           the server as needed, while the user spell checks through the text.",
       titleOrientation: "top",
       colSpan: 2
    }

    ]
});

isc.VStack.create({
    membersMargin: 10,
    width: "100%",
    members: [dateForm]
});

Here is a screenshot from the above code running in the showcase:



I'm using this setup to show entered content to the user on mobile devices. All of the above items have to be clipped, to not exceed the clients display width. The StaticTextItem "mdri" is the only FormItem in the DynamicForm using title orientation "top". As you can see, this title exceeds the width for the first column and is not clipped like the others.
Is there a way to clip the title, like in the other FormItems but with title orientation "top"?

Thanks in advance!

Kind Regards

[Isomorphic]

That title will be clipped if it exceeds its available space, just like the others. Titles with orientation: "top" are rendered in the same cell as the associated item, unlike those with orientation: "left" or "right", as we explain here. Since you've assigned a colSpan of 2 for that item, the title has both columns of space available before clipping.

[Developer12145]

I agree with You on that. I assigned a colSpan of 2 for styling purpose. Most of our values are contact data, e.g. phone numbers, email-addresses and so on, so the title and value can be shown in one row, because they are short enough, and look good if clipped.
We also have comments, and those should appear as text filling the whole client width and taking as much height as it needs, because they can be very long and the user should be able to read them as they are.
The actual "problem" is, that the colon (titleSuffix - see picture in #1) appears on the end of the second column, what makes sense with title-orientation "top" and colSpan 2. Setting colSpan 1, would solve the titleSuffix problem, but does not fulfill our requirements regarding the display width for comments. Could you maybe make a fix for that, or give advise on how to solve that issue?

Kind Regards

[Isomorphic]

We've made a change to the 12.0 and 12.1 branches which should address this issue with the title suffix (the ":" character) appearing right-aligned rather than sitting next to the title text in this configuration.
Please try the next nightly build (Jan 11 or above) to get this fix

Regards
Isomorphic Software