Simple Layout minHeight issue

[yavery]

Hi,

I have the following code:

isc.VLayout.create
({
    width : '100%',
    height : '100%',
    overflow : 'auto',
    layoutMargin : 0,
    membersMargin : 0,
    border : '2px solid blue',
    members :
    [
        Canvas.create({ overflow : 'auto', contents : 'Abc',
            border : '2px solid red', minHeight : 200,
            defaultHeight : '50%', height : '50%', width : '100%' }),

        Canvas.create({ overflow : 'auto', contents : 'Xyz',
            border : '2px solid yellow', minHeight : 200,
            defaultHeight : '50%', height : '50%', width : '100%' })
    ]
});

When I try this code on the live demos application @ www.smartclient.com, the minHeight has no
effect. I thought the above code would have triggered the scroll bars to appear when the window
gets resized to a point where the layout can't fit 200 pixels (minHeight).

How can this behavior be achived ? Simple, but with quite some playing around, I still haven't
figured it out ...

Thanks in advance for your help ...

[Isomorphic]

minHeight currently affects dragging only. If you want a layout to have a minimum size, one way to do is to add a non-member child of that size.

[yavery]

Ahhh ... That minHeight property is somewhat misleading. Indeed, the following code achieves
the desired behavior.

Thanks for your help!

isc.VLayout.create
({
    width : '100%',
    height : '100%',
    overflow : 'auto',
    layoutMargin : 0,
    membersMargin : 0,
    border : '2px solid blue',
    members :
    [
        Canvas.create({ contents : 'Abc', border : '2px solid red', height : '50%', width : '100%' }),
        Canvas.create({ contents : 'Xyz', border : '2px solid yellow', height : '50%', width : '100%' })
    ],
    children :
    [
        Canvas.create({ width : 200, height : 200 })
    ]
});

[yavery]

Hi,

I've continued working with the proposed approach in mind and it does work, for as long as the stacked
components are Canvas objects, but if I replace them with Window objects (as per the example below), if causes issues.

The VLayout objects respect the minimum sizes, but their embedded Window objects don't respect
the 'fill' vPolicy defined, when the layout resizes to the point where the minimum value defined in the children collection ...

Is there anything else I should do or am I doing something wrong?

VLayout.create
({
    width : '100%',
    height : '100%',
    layoutMargin : 0,
    membersMargin : 0,
    border : '2px solid blue',

    //----------------------------------------------------------------------------------------------------------------------------
    initWidget : function()
    {
        this.addMember(VLayout.create
        ({
            border : '2px solid red',
            members : [ Window.create({ autoSize: false, overflow: 'auto', enforcePolicy : true, vPolicy : 'fill', hPolicy : 'fill' }) ],
            children : [ LayoutSpacer.create({ height : 200, width : '100%' }) ],
            refreshContents : function()
             {
                 this.members[0].setTitle('width: ' + this.getVisibleWidth() + ' - height: ' + this.getVisibleHeight());
             }
        }));

        this.addMember(VLayout.create
         ({
             border : '2px solid yellow',
            members : [ Window.create({ autoSize: false, overflow: 'auto', enforcePolicy : true, vPolicy : 'fill', hPolicy : 'fill' }) ],
            children : [ LayoutSpacer.create({ height : 200, width : '100%' }) ],
            refreshContents : function()
             {
                 this.members[0].setTitle('width: ' + this.getVisibleWidth() + ' - height: ' + this.getVisibleHeight());
             }
         }));

        this.addMember(VLayout.create
         ({
             border : '2px solid red',
            members : [ Window.create({ autoSize: false, overflow: 'auto', enforcePolicy : true, vPolicy : 'fill', hPolicy : 'fill' }) ],
            children : [ LayoutSpacer.create({ height : 200, width : '100%' }) ],
            refreshContents : function()
             {
                 this.members[0].setTitle('width: ' + this.getVisibleWidth() + ' - height: ' + this.getVisibleHeight());
             }
         }));

        this.Super('initWidget', arguments);
    },

    //----------------------------------------------------------------------------------------------------------------------------
    resized : function()
    {
        this.Super('resized', arguments);

        for (var i = 0; i < this.members.length; ++i)
            Class.delayCall('refreshContents', [], 0, this.members[i]);
    }
});

[yavery]

Anyone had a chance to look into this ?

I've been able to reproduce this not only with Window objects, but V|HLayout objects
too. The only case where it seem to work well is when it embeds raw Canvas objects ...

Thanking you in advance for your help,