HStack behaviour

[acarur01]

I am testing hstack layout alignment: centered - I want the children to appear in the center of the hstack parent. The code below shows an example of an hstack with another hstack as a child - this works. But when I have a custom image as a child it is not centered on the vertical axis, just the horizontal axis. What am I missing?

Note that if I use a regular ImageButton, the centering works.

HStack with Hstack as child (works)

isc.HStack.create({
    width: "100%",
     backgroundColor:"black",
     height: "100%",
     align:"center",
    defaultLayoutAlign:"center",
    members : [
        isc.HStack.create({ID: "test2", backgroundColor: "white", width: 100,height:200})
    ]
});

Hstack with image as child

isc.ClassFactory.defineClass("CwImageItem", "CanvasItem");

isc.CwImageItem.addProperties({
    init:function () {
        this.canvas = isc.ImgButton.create({
            showTitle: this.showTitle,
            src:this.src,
            cwImageID: this.cwImageID,
            width:this.width,
            height:this.height,
            form: this.form,
            autoFit: this.autoFit,
            showRollOver: this.showRollOver,
            showDown: this.showDown,
            overflow: "visible",
            canFocus: this.canFocus,
            imageType: this.imageType,
            click: this.click,
            cwUserUrl: this.cwUserUrl,
            visibility: this.visibility,
            baseStyle: this.baseStyle,
            auditor: this.auditor
        });

        return this.Super("init", arguments);
    }
    
});



isc.HStack.create({
    width: "100%",backgroundColor:"black",
height: "100%",
align:"center",defaultLayoutAlign:"center",
    members : [
        isc.DynamicForm.create({align: "center",
    ID: "imgButton",
    fields:[{_constructor:"CwImageItem", ID: "testImage",src: "icons/16/icon_add_files.png"}]
})
    ]
});

[acarur01]

I do know that adding a layout spacer will fix my problem but I would rather try to figure out why it works for one child and not the other

[Isomorphic]

Use the Watch Tab: the form is centered, but it's also filling the entire space, so the items within in appear near the top of the overall space.