The "overflow" attribute on the Window object does not work when set to "hidden" as attribute on object creation

[chris@umed.io]

When creating a window object, I am attempting to default the overflow attribute to "hidden".
However, the only way I can currently get this to work is to explicitly set it using: window_obj.setOverflow("hidden");

For a simple example of the behaviour, paste the below sample code into any sample showcase javascript window and click the "Try It" button:

 
isc.HLayout.create({
    width: 300,
    layoutMargin:5,
    membersMargin: 10,
    members: [
        isc.Button.create({
            title: "Show",
            width: 100,
            click : function () {
                if (this.fillScreenWindow == null) {
                    this.fillScreenWindow = isc.Window.create({ID: "my_window",
                              overflow: "hidden", layoutAlign: "left", autoDraw: false, showHeader: false,
                              canDragReposition: false, dismissOnOutsideClick: true, isModal: true, autoSize: true,
                              height: "80", backgroundColor: "yellow",
                              title: "My Window", showMinimizeButton: false, showStatusBar: false, showResizer: false,
                            items: [ isc.DynamicForm.create({
                                     ID: "my_form", numCols: 2, autoDraw: true, autoFetchData: false,
                                    fields: [ {name: "a_selector", title: "Choose Destination",
                                           addUnknownValues: true, type: "select", autoFetchData: true}
                                            , {name: "a_textfield1", title: "Ok", type: "button", align: "right"}
                                     ]}
                                   )]});
                     this.fillScreenWindow.moveTo(this.getPageLeft(), this.getPageBottom());
                } else {
                    this.fillScreenWindow.show();
                }
                this.fillScreenWindow.bringToFront();
            }
        }),
    ]
});

Click the "SHOW" button (might need to click it a few times to get modal to show) and the "overflow" will be shown as yellow background.
If you then use a browser debugger and run :

my_window.getOverflow()

... it will show as "visible"

If you then use the browser debugger and run :

my_window.setOverflow("hidden")

... then the overflow disappears.
If you add :

my_window.setOverflow("hidden");

... after the isc.window.create() call then it works.

Is there something I am misunderstanding about overflow?

[Isomorphic]

See window.autoSize. The overflow of the Window is determined dynamically based on this setting.

[chris@umed.io]

Thanks for the quick feedback. The autoSize attribute is used in the example I posted and does not help.
The problem seems to be that the "overflow" attribute has no effect if used as an argument in the window creation.
I used this example in your showcase:
https://www.smartclient.com/smartcli...windowAutosize
... and only changed the help text to a single line then clicked "Try It" but the autosize results in both windows that have a significant amount of whitespace below the single line.

It seems like the autoSize works down to a minimum window size and then does not get any smaller (unless "overflow" is set to "hidden").

In the autoSize showcase example, using the "overflow" as an attribute on the window create does not change it to hidden - it still gets created with overflow="visible".
Setting it to "hidden" using a separate Javascript statement then results in the desired outcome.

So basically if the "overflow" as an attribute worked on the window create then the autoSize works as expected for windows that are less than 3 rows .

[Isomorphic]

As we've covered just now, window.overflow is dynamically defaulted based on window.autoSize. Directly setting overflow is not expected to work.

As far as why autoSize does not appear to work when you remove some of the text from the HelpCanvas, the default height of a Canvas is 100, so you would need to set eg height:20 (or just height:1) on the HelpCanvas.

Perhaps the minimum default height of DynamicForm is also the problem in your first code snippet. It's not really clear what you actually want to happen.

[chris@umed.io]

Ah sorry - did not register what you said first time round.
I am trying to display a modal window with a single combobox with the window autosized to the combox.

[Isomorphic]

Ok - and with the information of setting height to a minimal value, do you now have the behavior you want?

[chris@umed.io]

Thank you very much for your patience on this.
I remain unable to achieve my goal without using an extra javascript statement to set overflow to hidden.
The code below works in your showcase and will demonstrate 3 different windows with identical code apart from:
w1 - no "defaultHeight" or "height" attrib on Window
w2 - has "defaultHeight" (using "height" has exactly he same outcome)
w3 - identical to w2 but has the javascript statement executed after creation to set "overflow" to hidden

NOTE: the solution does require setting "defaultHeight" or "height" on Window object to the exact required height to work

var myApp = {}

myApp.dosomething = function() {
    isc.say("Add some biz logic here...");  
}

w1 = isc.Window.create({
    autoSize: true,
    canDragReposition: true, showHeader: false,
    canDragResize: true, showMinimizeButton: false, showStatusBar: false, showResizer: false,
    canDragResize: true,
    items: [
      isc.DynamicForm.create({
        autoDraw: true,
        defaultHeight: 1,
        numCols: 2, autoDraw: true, autoFetchData: false,
        fields: [ {name: "a_selector", title: "Choose Destination", type: "select", autoFetchData: true
                , changed: "myApp.dosomething()"}
              ]
      })
    ]
});

w2 = isc.Window.create({
    autoSize: true,
    defaultHeight: 40,
    canDragReposition: true, left: 325, showHeader: false,
    canDragResize: true, showMinimizeButton: false, showStatusBar: false, showResizer: false,
    items: [
      isc.DynamicForm.create({
        autoDraw: true, autoSize: true,
        defaultHeight: 1,
        numCols: 2, autoDraw: true, autoFetchData: false,
        fields: [ {name: "a_selector", title: "Choose Destination", type: "select", autoFetchData: true
                , changed: "myApp.dosomething()"}
               ]
      })
    ]
});

w3 = isc.Window.create({
    autoSize: true,
    defaultHeight: 40,
    canDragReposition: true, left: 650, showHeader: false,
    canDragResize: true, showMinimizeButton: false, showStatusBar: false, showResizer: false,
    items: [
      isc.DynamicForm.create({
        autoDraw: true, autoSize: true,
        defaultHeight: 1,
        numCols: 2, autoDraw: true, autoFetchData: false,
        fields: [ {name: "a_selector", title: "Choose Destination", type: "select", autoFetchData: true
                , changed: "myApp.dosomething()"}
               ]
     })
   ]
});
w3.setOverflow("hidden");

[Isomorphic]

So again, as we've mentioned a couple of times, we don't know what you want to happen.

You have only talked about wanting the overflow to be hidden - we explaining why setting it directly doesn't work, by design. But what *behavior* do you want?

[chris@umed.io]

What I want to achieve is a single ComboxBox in a modal with the window auto sized to the size of the ComboBox - the way the window looks in the rightmost (3rd) window of the example I last posted above. The other 2 windows to the left show a lot of extraneous whitespace below the ComboBox that I want to get rid of and I would like to achieve that without resorting to the extra setOverflow() call for the 3rd window version.

[Isomorphic]

You need to set height, not defaultHeight, on the window, and set no height (or defaultHeight) on the form - form.autoSize isn't a thing, but forms are overflow visible anyway, so you can get rid of that.

See this tweaked sample-code:

isc.Window.create({
    height: 1,
    autoSize: true,
    canDragReposition: true, left: 650, showHeader: false,
    canDragResize: true, showMinimizeButton: false, showStatusBar: false, showResizer: false,
    items: [
      isc.DynamicForm.create({
        numCols: 2, autoDraw: true, autoFetchData: false,
        fields: [ {name: "a_selector", title: "Choose Destination", type: "select", autoFetchData: true
                , changed: "myApp.dosomething()"}
               ]
     })
   ]
});

[chris@umed.io]

Thanks for the speedy response but the sample you have posted exhibits the same problem ... a lot of whitespace below the ComboBox

[Isomorphic]

Ah - this misbehavior has already been fixed in our development branch, but we do see it in 12.0 - we'll take a deeper look and potentially update here.

In the meantime, you can get your desired behavior by setting height and minHeight on the window, and height on the window-body, like this...

isc.Window.create({
    height: 1,
    minHeight: 1,
    bodyProperties: { height: 1 },
    autoSize: true,

    canDragReposition: true, left: 650, showHeader: false,
    canDragResize: true, showMinimizeButton: false, showStatusBar: false, showResizer: false,
    items: [
      isc.DynamicForm.create({
        numCols: 2, autoDraw: true, autoFetchData: false,
        fields: [ {name: "a_selector", title: "Choose Destination", type: "select", autoFetchData: true
                , changed: "myApp.dosomething()"}
               ]
     })
   ]
});

[chris@umed.io]

Works like a charm thank you.