tabBarControls: trying to fill the available space

[claudiobosticco]

SmartClient Version: SNAPSHOT_v12.1d_2019-03-26/AllModules Development Only (built 2019-03-26)
SmartClient Version: v11.1p_2019-03-19/AllModules Development Only (built 2019-03-19)

Chrome on OSX

Hello, I'm trying to add some controls in the TabSet.tabBar, and I want to have a control aligned to the left, near the tabs, and the others aligned to the right.

At first this seems to work:

isc.TabSet.create({
    ID: "topTabSet",
    tabBarPosition: "top",
    tabBarAlign:"left",
    width: 600,
    height: 200,
    tabs: [
        {title: "Status", 
         pane: isc.Canvas.create({autoDraw: false, ID:"statusPane"})
        },
        {title: "Foo", 
         pane: isc.Canvas.create({autoDraw: false, ID:"fooPane"})
        }
    ],
    tabBarControls:[
        isc.IButton.create({
            autoDraw: false,
            ID:"button1",
            title:"Button 1"
        }),   
        isc.LayoutSpacer.create({width:"100%"}), 
        isc.IButton.create({
            autoDraw: false,
            ID:"button2",
            title:"Button 2"
        }),
        "tabScroller", "tabPicker"
    ]
});

as the result is what I was looking for:


But if you try a slightly longer title in the second tab, ie 'Foobar', the result is this:


is it a bug? Or am I trying something not supported?

[claudiobosticco]

Also, if I add a third button to the right, and if I add tabBarControlLayoutProperties: { membersMargin:10},

isc.TabSet.create({
    ID: "topTabSet",
    tabBarPosition: "top",
    tabBarAlign:"left",
    width: 700,
    height: 200,
    tabBarControlLayoutProperties: {
        membersMargin:10
    },
    tabs: [
        {title: "Status", 
         pane: isc.Canvas.create({autoDraw: false, ID:"statusPane"})
        },
        {title: "Foobar", 
         pane: isc.Canvas.create({autoDraw: false, ID:"fooPane"})
        }

    ],
    tabBarControls:[

        isc.IButton.create({
            autoDraw: false,
            ID:"button1",
            title:"Button 1"
        }),   
        isc.LayoutSpacer.create({width:"100%"}), 
        isc.IButton.create({
            autoDraw: false,
            ID:"button2",
            title:"Button 2"
        }),
        isc.IButton.create({
            autoDraw: false,
            ID:"button3",
            title:"Button 3"
        }),
        "tabScroller", "tabPicker"
    ]
});

I get another different outcome:

[Isomorphic]

Due to tabs supporting adaptive width and other complexities of tabSet widget layout, flexible-sized controls (including spacers) aren't supported in tabBarControls. However, if you take into account the width of your tabs, and whether the picker and scroller are present, you can add a fixed-width spacer to achieve your desired look, as long as the set of tabs and tabSet width are static.