TabSet and paneContainerOverflow:"visible"

[claudiobosticco]

Hello, is it expected behaviour that a TabSet with a Tab pane (which is a DynamicForm with explicit width and height) does not resize to contain the form, even when using paneContainerOverflow: "visible"?

Here’s an example:

isc.DynamicForm.create({
    ID: "fooForm",
    border:"1px solid red",
    width:500,
    height:400,
    fields: [{
        name: "foo", title: "foo bar", type: "text"
    }]
});

isc.TabSet.create({
    ID: "tabSet",
    paneContainerOverflow:"visible",
    tabs: [{
        id: "foo",
        title: "foo bar",
        pane: fooForm
    }]
});

I may just be missing something obvious, but if this is the expected behaviour, I’d like to know if there’s a recommended best practice to achieve this without manually setting the size on the TabSet.

My specific use case involves embedding the TabSet inside a Window with autoSize: true.

[Isomorphic]

We may be missing something in the question, but are you just looking for 'overflow:"visible"' on the tabSet itself in addition to paneContainerOverflow:"visible"?

[claudiobosticco]

Ah, looks like I completely missed the obvious here - thank you for clearing that up!

[claudiobosticco]

Hello, I noticed that with the above code, after adding overflow: "visible", only the first tab is displayed. Here's a test case:

isc.TabSet.create({
    ID: "tabSet",
    paneContainerOverflow:"visible",
    overflow:"visible",
    tabBarProperties: {
        //overflow:"visible"
    },
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
         pane: isc.VLayout.create({width:500,height:200,members:[isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})]})},
        {title: "Green", icon: "pieces/16/pawn_green.png", iconSize:16,
         pane: isc.VLayout.create({width:500,height:200,members:[isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})]})}
    ]
});

isc.HLayout.create({
    top: 260,
    membersMargin: 10,
    members: [
        isc.IButton.create({
            title: "Add Tab",
            click: function () {
                // alternate between yellow pawn and green cube
                if (tabSet.tabs.length % 2 == 0) {
                    tabSet.addTab({
                        title: "Yellow",
                        icon: "pieces/16/pawn_yellow.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
                    });
                } else {
                    tabSet.addTab({
                        title: "Green",
                        icon: "pieces/16/cube_green.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
                    });
                }
                if (tabSet.tabs.length == 1) tabSet.selectTab(0);
            }
        }),
        isc.IButton.create({
            title: "Remove Tab",
            click: function () {
                tabSet.removeTab(tabSet.tabs.length-1);
            }
        })
    ]
});

the result is:


(Note: If I add 3 tabs, the entire tabBar appears as expected.)

If I uncomment the following:

tabBarProperties: {
        overflow:"visible"
    },

Then both initial tabs are displayed, but the tabBar baseline is too short:



I also tried using tabProperties: {width: "*"} since I have a fixed number of tabs and would like them to expand to fill the horizontal space, but this had no effect.

[Isomorphic]

We agree that these settings doesn't appear to be having as expected. We'll take a look at get back to you

Regards
Isomorphic Software

[Isomorphic]

We've made some changes to address this issue. Please try the next nightly build dated Dec 13 or above (Change applied to branches 13.x and 14.x)

Regards
Isomorphic Software

[claudiobosticco]

SmartClient Version: v13.1p_2024-12-13/AllModules Development Only (built 2024-12-13)

Hello, now with this test case:

isc.TabSet.create({
    ID: "tabSet",
    paneContainerOverflow:"visible",
    overflow:"visible",
    tabProperties: {width: "*"},
    tabBarProperties: {
        overflow:"visible"
    },
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
         pane: isc.VLayout.create({width:500,height:200,members:[isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})]})},
        {title: "Green", icon: "pieces/16/pawn_green.png", iconSize:16,
         pane: isc.VLayout.create({width:500,height:200,members:[isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})]})}
    ]
});

isc.HLayout.create({
    top: 260,
    membersMargin: 10,
    members: [
        isc.IButton.create({
            title: "Add Tab",
            click: function () {
                // alternate between yellow pawn and green cube
                if (tabSet.tabs.length % 2 == 0) {
                    tabSet.addTab({
                        title: "Yellow",
                        icon: "pieces/16/pawn_yellow.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
                    });
                } else {
                    tabSet.addTab({
                        title: "Green",
                        icon: "pieces/16/cube_green.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
                    });
                }
                if (tabSet.tabs.length == 1) tabSet.selectTab(0);
            }
        }),
        isc.IButton.create({
            title: "Remove Tab",
            click: function () {
                tabSet.removeTab(tabSet.tabs.length-1);
            }
        })
    ]
});

I get the behaviour I was looking for:



in my particular test case, thank you very much.

However, if I comment out tabProperties: {width: "*"}, I see that the tabBar baseLine remains "short" as in post #4, 2nd screenshot. Is it expected?

[Isomorphic]

Thanks for the follow up. You shouldn't need to set those properties on the tabBar to have the baseLine size correctly. We'll take a look and get back to you

Regards
Isomorphic Software

[Isomorphic]

Hi Claudio

We've made a change which should address the issue where the baseline shows up too small without the need for your settings on tabBarProperties / tabProperties.

This change will be present in nightly builds going forward (13.1 branch and above).

However, on review, this is a usage which has some caveats and we consider to be "semi supported".

If you have multiple tabs in a TabSet with panes of different sizes, the current behavior will size the TabSet large enough to accommodate the largest pane, and in most cases maintain this size whether that tab is selected or not. This is consistent with how the browser reports scroll size and coordinates for components that are drawn with css visibility set to "hidden".

However certain settings on pane content (such as hideUsingDisplayNone), or for tabs where a pane is dynamically generated, you may see different behavior, including the size changing when a tab is selected or deselected, and in some cases this behavior may appear unintuitive to the user and confusing or random to the developer.

To make this supportable, something like a new "overflowResizePolicy" setting would be required, which makes the behavior consistent and configurable, rather than relying on whatever the DOM is telling us about size.

Doing the work to support this and verify consistent behavior across all edge cases would qualify for Feature Sponsorship - please let us know if you'd be interested in pursuing this.


Regards

Isomorphic Software.