Overflow:hidden set in Firefox produces undesired result in scenario with snapTo

[shresthg_des]

SmartClient Version: v9.1p_2015-09-16/Pro Development Only (built 2015-09-16)
Firefox 44.0.2
Chrome Version 48.0.2564.116 (64-bit)

Using the code below in Chrome, you should see the "HI" label displayed on the left side of the button that says "helloooooo". However on Firefox, the "HI" label is not shown because the layout that contains the button is overflow hidden. I need the layout because there will be multiple instances of the button/label. I would like for this to be set to overflow visible regardless of browser but it seems you guys set the overflow hidden in the DOM level. I want to achieve the same result that is seen in Chrome. I can set a width to increase the layout's size so that it shows the "HI" label but it is unreliable since label width can be any size.

isc.VLayout.create({
    ID: "ge",
    backgroundColor: "blue",
    width: "100%",
    height: "100%",
    peers: [
        isc.VLayout.create({
            ID: "hi",
            snapTo: "R",
            backgroundColor: "green",
            defaultLayoutAlign: "center",
            mDefaults: {
                canHover: true,
                title: "hellloooo",
                actionType: "radio",
                radioGroup: "moduleGroup",
                showFocusedAsOver: false,
                aDefaults: {
                    styleName: "canvasHover",
                    snapTo: "L",
                    snapEdge: "R",
                    snapOffsetLeft: -7,
                    animateAcceleration: "smoothEnd",
                    width: 1,
                    height: 1,
                    align: "right",
                    layoutAlign: "center",
                    autoFit: true,
                    wrap: false,
                    contents: "HI"
                },
                aConstructor: isc.Label
            },
            mConstructor: isc.Button,
            initWidget: function() {
                this.Super("initWidget", arguments);
                hi.addMember(this.createAutoChild("m", {
                    initWidget: function() {
                        this.Super("initWidget", arguments);
                        this.addAutoChild("a");
                    }

                }));
            }

        })

    ]

});

[Isomorphic]

If you are tying to make a component that is visible out to the top/left of the parent's bound box, make a peer, not a child.

[shresthg_des]

Yes, I am trying to make a component that is visible to the left of the parent's bound box. I have added the label as a peer of the button but the result remains the same: the label is not visible. What you are suggesting would work if I had only one button (in the code I provided that is the case). But there will be multiple buttons and I want the label to be displayed on the left side of each button (similar to a tool tip). If you run the code in Chrome, it will work. Running in Firefox will not.

isc.VLayout.create({
    ID: "ge",
    backgroundColor: "yellow",
    width: "100%",
    height: "100%",
    peers: [
        isc.VLayout.create({
            ID: "hi",
            snapTo: "R",
            backgroundColor: "green",
            defaultLayoutAlign: "center",
            mDefaults: {
                canHover: true,
                title: "hellloooo",
                actionType: "radio",
                radioGroup: "moduleGroup",
                showFocusedAsOver: false,
                aDefaults: {
                    styleName: "canvasHover",
                    snapTo: "L",
                    snapEdge: "R",
                    snapOffsetLeft: -7,
                    animateAcceleration: "smoothEnd",
                    width: 1,
                    height: 1,
                    align: "right",
                    layoutAlign: "center",
                    autoFit: true,
                    wrap: false,
                    contents: "HI"
                },
                aConstructor: isc.Label
            },
            mConstructor: isc.Button,
            initWidget: function() {
                this.Super("initWidget", arguments);
                hi.addMember(this.createAutoChild("m", {
                    initWidget: function() {
                        this.Super("initWidget", arguments);
                        this.addPeer(this.createAutoChild("a"));
                    }
                }));
                hi.addMember(this.createAutoChild("m", {
                    initWidget: function() {
                        this.Super("initWidget", arguments);
                        this.addPeer(this.createAutoChild("a"));
                    }
                }));
            }

        })

    ]

});

[Isomorphic]

If it's still clipped, you are still adding it as a child. Peers are not clipped by the parent's bounding box. Use the Watch tab in the Developer Console to see exactly where the widget is and why it is clipped.

[shresthg_des]

It is truly being added as a peer of the button. The issue here is that the "green" layout that contains these buttons is set to overflow hidden in Firefox. This causes the button's peer to not show since the green layout is sized to fit only the button. The labels are clipped due to this green layout with overflow hidden. This works in Chrome because the green layout is overflow visible but the green layout in Firefox is hidden. Could we somehow force to make the green layout overflow visible in Firefox to solve this issue?

[Isomorphic]

Again:

If you are tying to make a component that is visible out to the top/left of the parent's bound box, make a peer, not a child.

Your code makes the "a" autochildren into peers of the "m" autochildren. But the "m" autochildren are children of the "hi" layout, and so are their peers, so they are clipped.