12.0p FormItem sizing issues / questions

[Blama]

Hi Isomorphic,

please see this testcase (v12.0p_2020-04-27):
As you can see a few IMHO strange things happen:

1. FormWidth is always reported as 300 in the label, even if the width changes, and this never matches the Developer Console Watch Tab (it does for the buttons, with match the 150 from the code)
2. Only 40 and 60 have the right padding that should always be there (especially as the DynamicForm drawn width is never 300 anyway)
3. 10 and 20 don't have an effect on short text and amount
4. 30 only has on short text, not on amount

We are trying to get nice looking and possibly growing forms (because of i18n titles, another ticket) and this padding issue came up. The rest I found while creating this testcase.

Best regards
Blama

isc.DynamicForm.create({
    ID: "myDF",
    width: "300",
    backgroundColor: "yellow",
    numCols: 2,
    colWidths: ["*", "40"],
    isGroup: true,
    groupTitle: "My group",
    border:"1px solid blue",
    padding:50,
    fields: [
        {name: "enabled",
         title: "Enabled?",
         type: "boolean",
         width: "*",
         labelAsTitle: true,
        },
        {name: "subject",
         title: "Short text",
         type: "text",
         width: "*"
        },
        {name: "amount",
         title: "Amount",
         type: "integer",
         width: "*",
         editorType: "SpinnerItem"
        }
    ]
});

isc.Button.create({
    ID: "width10",
    width: 150,
    title: "'colWidths', ['*', '10']",
    click: "widthDisplay.updateAndReport(10)"
});

isc.Button.create({
    ID: "width20",
    width: 150,
    title: "'colWidths', ['*', '20']",
    click: "widthDisplay.updateAndReport(20)"
});

isc.Button.create({
    ID: "width30",
    width: 150,
    title: "'colWidths', ['*', '30']",
    click: "widthDisplay.updateAndReport(30)"
});

isc.Button.create({
    ID: "width40",
    width: 150,
    title: "'colWidths', ['*', '40']",
    click: "widthDisplay.updateAndReport(40)"
});

isc.Button.create({
    ID: "width60",
    width: 150,
    title: "'colWidths', ['*', '60']",
    click: "widthDisplay.updateAndReport(60)"
});

isc.Button.create({
    ID: "width200",
    width: 150,
    title: "'colWidths', ['*', '200']",
    click: "widthDisplay.updateAndReport(200)"
});

isc.Button.create({
    ID: "width300",
    width: 150,
    title: "'colWidths', ['*', '300']",
    click: "widthDisplay.updateAndReport(300)"
});

isc.HLayout.create({
    ID: "buttonsLayout",
    members: [width10, width20, width30, width40, width60, width200, width300],
    membersMargin: 10,
    width: "100%"
});

var widthDisplay = isc.Label.create({
    ID: "widthDisplay",
    width: 500, height: 40,
    border: "1px solid grey",
    updateAndReport: function (width) {
       myDF.setProperty('colWidths', ['*', width]);
       this.setContents("Clicked Button: " + width + "<br/>" + 
                        "FormWidth: " + myDF.width + "<br/>" + 
                        "enabled: " + myDF.getField("enabled").width + "<br/>" + 
                        "subject: " + myDF.getField("subject").width + "<br/>" + 
                        "amount: " + myDF.getField("amount").width + "<br/>"
);
    }
});

isc.VLayout.create({
    members: [myDF, buttonsLayout, widthDisplay ],
    membersMargin: 10,
    width: "80%"
});

[Isomorphic]

canvas.width is the configured width, you seem to want getVisibleWidth().

The rest of this is just garbage in, garbage out. None of these controls can render at 10 or 20 pixels, so when you provide that tiny column width, your specification gets ignored and the default size is used. Once you've allocated enough space to the column to allow the control to render, it does so, at your specified width. Then, when you specify colWidths that greatly exceed available space, the system goes back to ignoring your invalid settings again.

[Blama]

Hi Isomorphic,

thanks for the fast answer. That all makes sense to me.

Best regards
Blama