Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Titles are not horizontally in the same position

    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.

    Click image for larger version

Name:	height diff.PNG
Views:	96
Size:	10.6 KB
ID:	261328
    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)
    Code:
    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

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

    Comment


      #3
      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.
      Last edited by Isomorphic; 18 Mar 2020, 13:57.

      Comment


        #4
        Hi Isomorphic,

        looking crisp now using v12.0p_2020-03-19:
        Code:
        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"}
            ]
        });
        Click image for larger version

Name:	Positioning of FormItem titles.PNG
Views:	90
Size:	13.8 KB
ID:	261474

        Thank you & Best regards
        Blama

        Comment

        Working...
        X