Tabs are overlapping with icon and CloseIcon

[SimonF]

Hi there,
We are using the latest release nighly SmartClient_v91p_2014-05-08_Pro.
In every tab we are using we use a icon. While we don't want to replace the closeIcon we use the workaround documented here.

Using Chrome 34 there seems to be an issue, that the tabs are overlapping each other. After hovering the tabs once with the mouse, they correct each other and are no longer overlapping each other.

This code will reproduce the bug, you can paste it here. Note: If it does correctly shown at the first time, i refresh with F5 and copy again and click "Try it". The overlapping occurs within the first 1-10 times. I couldn't make it out under what specific conditions the overlapping occurs.

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "top",
    width: "100%",
    height: 200,
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
         pane: 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.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
    ]
});


isc.IButton.create({
    title: "Add Tab",
    top: 225,
    click: function () {
        // alternate between yellow pawn and green cube
		for(var i = 0; i<6; i++){
        tabSet.addTab({
 "canClose":true,
 "title":"<span>" + isc.Canvas.imgHTML("/docs/9.1/a/system/reference/exampleImages/icons/16/person.png") + "Joan Bauklötzchen</span>",
 pane:isc.HLayout.create({
   "autoDraw":true,
   "members":
   [isc.Button.create({
     "title":"Default",
    })]})});
		}
        if (tabSet.tabs.length == 1) tabSet.selectTab(0);
    }
});

isc.IButton.create({
    title: "Remove Tab",
    top: 225,
    left: 110,
    click: function () {
        tabSet.removeTab(tabSet.tabs.length-1);
        tabSet.removeTab(tabSet.tabs.length-1);
        tabSet.removeTab(tabSet.tabs.length-1);
        tabSet.removeTab(tabSet.tabs.length-1);
        tabSet.removeTab(tabSet.tabs.length-1);
        tabSet.removeTab(tabSet.tabs.length-1);
    }
});

In addition, if you open the snippet with firefox (tested with Firefox 29, there is a misalignment in the title of the tabs

A quick hack would be this code; replacing the title with a own image-tag and text, but i think this is a dirty workaround and should be correct aligned.

 "title":"<span><img src=docs/9.1/a/system/reference/exampleImages/icons/16/person.png" style=''vertical-align:-4px;''> Joan Henning</span>"

[Isomorphic]

Pass sizes for the image to imgHTML().

It's intermittent due to caching - if the file is cached the size is know to the browser so auto-sizing works.

[SimonF]

thanks, it seems to be fixed if i add the icon dimensions into the imgHTML.
Nonetheless it seems that the missalignment of the titles in firefox still occurs. is there also a fix planned?

[Isomorphic]

If you're referring to the imperfect centering between your icon generated via imgHTML and the text, that's not a framework issue - it's your code rendering that.

[SimonF]

ok, thanks for the information