Window has unexpected scrollbars

[SimonF]

Hi there

I want to display a window with a form, the number of fields does vary from some to many.
Therefore I added a DynamicForm into a Layout and do a overflow: auto. That the form is not sticking to the border of the window, i have added a padding to the corresponding layout.
Because the title of the formfield is also customizable the title should have 40% of the width and the value 60%.

The example below should do exactly the described things, but

• * a horizontal slider appears when using padding on the layout, wehere the form is included
• * the titles of the formItems doesn't have the correct widths, also the formItem itself (not 40%- 60%)

I cannot discover anything wrong, but the behaviour is the same in all current browsers(IE, Firefox and Chrome).
I think the correct behavour would be: no horizontal-scollbar and the correct colWidths.

isc.Window.create({
    "ID" : "window",
    "width" : "400",
    "height" : "150",
    "autoDraw" : true,
    "title" : "Title",
    "autoCenter" : true,
    "items" :
    [isc.VLayout.create({
            "ID" : "mainLayout",
            "width" : "100%",
            "members" :
            [isc.VLayout.create({
                    "ID" : "ScrollLayout",
                    "width" : "100%",
                    "height" : "100%",
                    "overflow" : "auto",
                    "padding" : 4,
                    "members" :
                    [isc.DynamicForm.create({
                            "ID" : "form",
                            "width": "100%",
                            "colWidths" : ["40%", "60%"],
                            "fields" :
                            [{
                                    "ID" : "introTextItem",
                                    "name" : "introTextItem",
                                    "type" : "staticText",
                                    "colSpan" : 2,
                                    "showTitle" : false,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10014",
                                    "name" : "freeField10014",
                                    "title" : "WhoAreYou",
                                    "type" : "staticText",
                                    "width" : 300,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10021",
                                    "name" : "freeField10021",
                                    "title" : "Chombobox",
                                    "type" : "staticText",
                                    "width" : 300,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10019",
                                    "name" : "freeField10019",
                                    "title" : "Select",
                                    "type" : "staticText",
                                    "width" : 300,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10025",
                                    "name" : "freeField10025",
                                    "title" : "Integer",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10016",
                                    "name" : "freeField10016",
                                    "title" : "Float",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10024",
                                    "name" : "freeField10024",
                                    "title" : "List",
                                    "type" : "staticText",
                                    "width" : 300,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10020",
                                    "name" : "freeField10020",
                                    "title" : "Field",
                                    "type" : "staticText",
                                    "width" : 300,
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10026",
                                    "name" : "freeField10026",
                                    "title" : "Time",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10022",
                                    "name" : "freeField10022",
                                    "title" : "Bool",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10015",
                                    "name" : "freeField10015",
                                    "title" : "Text",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }, {
                                    "ID" : "freeField10023",
                                    "name" : "freeField10023",
                                    "title" : "Date",
                                    "type" : "staticText",
                                    "readOnlyDisplay" : "static"
                                }
                            ],
                            "values" : {
                                "freeField10021" : "A",
                                "introTextItem" : "This are the values to be shown in the form",
                                "freeField10016" : "B",
                                "freeField10019" : "C",
                                "freeField10026" : "D",
                                "freeField10014" : "E",
                                "freeField10023" : "17.03.2016",
                                "freeField10024" : "F",
                                "freeField10022" : "G",
                                "freeField10015" : "H",
                                "freeField10025" : "I",
                                "freeField10020" : "J"
                            }
                        }),
                        isc.LayoutSpacer.create({
                            "hideUsingDisplayNone" : false
                        })
                    ]
                }),
                isc.DynamicForm.create({
                    "ID" : "buttonForm",
                    "width" : "100%",
                    "fields" :
                    [{
                            "type" : "toolbar",
                            "buttons" :
                            [{
                                    "ID" : "closeButton",
                                    "width" : "100%",                                    
                                    "title" : "Close"
                                }
                            ],
                            "createButtonsOnInit" : true
                        }
                    ],
                    "values" : {}
                })
            ]
        })
    ],
    "showMinimizeButton" : false,
    "showHeaderIcon" : false,
    "members" :
    []
});

Best Regards

[Isomorphic]

You've set the second column to 60% of 400 pixels, or 240 pixels (less padding), but then you've got items in that column set to 300 width. Removing these conflicting size settings fixes your issue.