[atomatom]

If you're trying to debug layout issue try Canvas.setBorder("1px solid black") so you can see the size of your shapes. Often it may be 'centered' but not fill the page.

[jmichelgarcia]

What do you want to center exactly ? post a screenshot, and explain your problem, not what you've been trying to do.

regards.

[billw]

See layout.deraultLayoutAlign, as well as the class overview doc, which covers the use of the terms length and breadth as a means of explaining both HLayout and VLayout behavior in one doc.

Still not helping.

[Isomorphic]

Well the whippersnappers that aren't having trouble may be using the sample we mentioned above.

[billw]

Is there a link to the samples? I'm using SmartClient JavaScript, not SmartGWT but searching these forms for centering does not yield any JS samples. I'm experiencing the same problem that whippersnapper RevMan is asking above.

[billw]

Already read this:

http://www.smartclient.com/docs/8.0/...arch=centering

[jmichelgarcia]

Is there a link to the samples? I'm using SmartClient JavaScript, not SmartGWT but searching these forms for centering does not yield any JS samples. I'm experiencing the same problem that whippersnapper RevMan is asking above.

http://www.smartclient.com/smartgwt/showcase/#layout_user_sizing

[sjivan]

There's a new centering sample that's currently not in the online showcase. It will be present in SmartClient 8.1 / Smart GWT 2.5.

You can view it by downloading the latest nightly. The sample is located under the "Layouts" section in the showcase.

[billw]

The following seems to work (as suggested in an earlier post). The function centerContents return a layout that fills its container and centers it's content. It uses an outer VLayout with nested HLayout, but also works the other way around with an inner VLayout with width 100% and height = content height.

However, either way, when the browser window is made small, the vertical space collapses nicely but there seems to be some extra horizontal space around the content. I may be missing something. I will try using layout spacers as suggested.

isc.Page.setEvent("load", function(){

    var header = isc.Canvas.create({
        height: 50,
        autoDraw: false,
        showEdges: true
    });

    var content = isc.Canvas.create({
        backgroundColor: "blue",
        showEdges: true,
        autoDraw: false,
        layoutAlign: "center",
        width: 200,
        height: 200,
        padding: 0,
        margins: 0
    });

    var footer = isc.Canvas.create({
        height: 50,
        showEdges: true,
        autoDraw: false
    });

    var page = isc.VLayout.create({
        height: "100%",
        width: "100%",
        members: [
            header,
            centerContents(content),
            footer
        ]
    });
});

function centerContents(content) {
    return isc.VLayout.create({
        width: "100%",
        autoDraw: false,
        height: "100%",
        members: [
            isc.HLayout.create({
                height: "100%",
                width: content.width,
                layoutAlign: "center",
                members: [
                    content
                ]
            })
        ]
    });
}

[Isomorphic]

Yes it's simpler with LayoutSpacer:

    var page = isc.VLayout.create({
        ID:"main",
        height: "100%",
        width: "100%",
        members: [
            header,
            isc.LayoutSpacer.create(),
            content,
            isc.LayoutSpacer.create(),
            footer
        ]
    });

.. and drop the centerContents function.

The refusal to resize below a certain number is a native, browser-specific behavior (not there in Chrome, smaller in IE than FF, etc) seemingly based on each browser vendor's concept of a reasonable minimum size.

Firefox seems to set the largest minimum - in a completely empty page you can see resize the browser to be very narrow and see the browser chrome stop resizing at a certain point and document.body.clientWidth (SmartClient's only access to the browser viewport size) stops shrinking. If you care about looking right in browsers sized to ~200px width or less, you may be able to affect this with CSS.