left side of drawPane in VLayout gets clipped

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-06/Enterprise Development Only (built 2017-04-06)

Chrome on OSX Sierra

Hello, please try this test case in the showcase:

var mainPane = isc.DrawPane.create({
    autoDraw: false,
    showEdges: true,
    width: 720,
    height: 475
});

var commonProps = {
    autoDraw: true,
    drawPane: mainPane,
    canDrag: true,
    titleRotationMode: "neverRotate"
};

isc.DrawRect.create({
    left: 200,
    top: 300,
    width: 150,
    height: 100,
    title: "Rectangle"
}, commonProps);

isc.VLayout.create({
    width: "100%",height:"100%",
    overflow: "auto",
    defaultLayoutAlign: "center",
    margin: 5,
    showEdges:false,
    members: [mainPane]
});

Then shrink the feature explorer right layout (using the feature explorer resize bar), until its width is less than the 720px of the drawPane.
You'll see that the horizontal scrollbar appears, but the left side of the drawPane is clipped.
Same effect if you set and initial width for the drawPane bigger than the available space.
I know that the showcase is a special environment, but I have this exact problem in my application.

[Isomorphic]

You've set the DrawPane to a fixed width of 720 then placed it centered (defaultLayoutAlign:"center") in a Layout that is less than 720px wide. So it's centered, and the left edge is cut off - this is exactly what these settings should do.

[claudiobosticco]

ok, thanks for the heads up.
My use case is that I want it to be centered when the Layout is wider than its member, and not cut off when the scrollbar appears, so I need to do something like:

isc.DrawPane.create({
    ID: "testPane",
    autoDraw: false,
    showEdges: true,
    width: 720,
    height: 475,
    parentResized: function () {
        isc.logEcho('parentResized');
    }
});

isc.VLayout.create({
    ID: "testLayout",
    width: "100%", height: "100%",
    overflow: "auto",
    margin: 5,
    showEdges: false,
    defaultLayoutAlign: "center",
    resized: function () {
        var width = this.getVisibleWidth();
        var drawPaneWidth = testPane.getVisibleWidth();
        if (drawPaneWidth > width) {
            this.setProperty('defaultLayoutAlign', 'left')
        } else {
            this.setProperty('defaultLayoutAlign', 'center')
        }
    },
    members: [testPane]
});

Is it a correct approach?

Please note: at first I tried to use parentResized on the DrawPane, but it doesn't fire. Is it a bug?

[claudiobosticco]

Please note: at first I tried to use parentResized on the DrawPane, but it doesn't fire. Is it a bug?

forgot to say that I've tested with this build:
SmartClient Version: SNAPSHOT_v11.1d_2017-04-11/Enterprise Development Only (built 2017-04-11)
and Chrome, Safari on OSX Sierra

[Isomorphic]

That approach is fine except.

parentResized() will fire if the *parent* of the Layout is resized. That isn't happening here - the layout has no (Canvas) parent.

[claudiobosticco]

parentResized() will fire if the *parent* of the Layout is resized. That isn't happening here - the layout has no (Canvas) parent.

mh, but in the test case I've defined parentResized on the drawPane "testPane", and the layout "testLayout" is its parent, isn't it?
Am I missing something?

[Isomorphic]

Then shrink the feature explorer right layout (using the feature explorer resize bar), until its width is less than the 720px of the drawPane. You'll see that the horizontal scrollbar appears, but the left side of the drawPane is clipped.

The Layout should now be behaving as expected in your situation and not clipping content, without any need for custom resizing logic. The fix has been been applied back to SC 11.0p and should be in the nightly builds dated 2017-04-15 and beyond.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-15/AllModules Development Only (built 2017-04-15)

I can confirm the fix is working, thank you very much!

And what about the post #6, about parentResized not firing?

[Isomorphic]

We've made a change to SC 11.1d to ensure that parentResized() is called for all children of a Layout. That will be in the nightly builds dated 2017-04-18 and beyond.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-04-18/AllModules Development Only (built 2017-04-18)

I can confirm that now parentResized it's called, thank you very much!