Tab Width Problem With Icon

[stonebranch2]

Hi Isomorphic,

We have a problem when tab titles contain an icon and you add multiple tabs.

It would appear the tab width isn't calculated properly and it ends up with no spacing between the tabs.

Just hovering your mouse overtop the tab title causes the tab width to change and spacing corrected.

Here is the spacing before hovering the mouse over the tab titles.



Here is the spacing after hovering the mouse over the tab titles.



If you can help us resolve this, it would be much appreciated.

SmartClient Version: v12.1p_2022-01-29/Pro Deployment (built 2022-01-29)

Thanks

public class Sandbox24 implements EntryPoint {

    public void onModuleLoad() {
        VLayout main = new VLayout();
        main.setWidth100();
        main.setHeight100();
        TabSet tabSet = new TabSet();
        tabSet.setWidth100();
        tabSet.setHeight100();
        main.addMember(tabSet);
        main.draw();

        restoreTabs(tabSet);
    }

    private void restoreTabs(TabSet tabSet) {
        addTab(tabSet, 1);
        addTab(tabSet, 2);
        addTab(tabSet, 3);
    }

    private void addTab(TabSet tabSet, int i) {
        Tab tab = new Tab();
        Layout layout = new HLayout();
        layout.setWidth100();
        layout.setHeight100();
        tab.setPane(layout);
        tab.setTitle("<span>Title" + i + " " + Canvas.imgHTML("16x16/tab_icon.png") + "</span>");
        tabSet.addTab(tab);
    }
}

[Isomorphic]

Pass the width and height to Canvas.imgHTML() (second and third parameters). Without this, we don't know the image size until it loads, so auto-sizing fails unless the image is cached. And like most developers, you probably have caching off.

[stonebranch2]

Thank you, I will give that a try.

[stonebranch2]

Looks good. Thanks again.

[Isomorphic]

Excellent, glad to hear that was the cause!

[Blama]

Hi Isomorphic,

might this be the reason here as well?

Best regards
Blama

[Isomorphic]

Good thought, but no, that's the first thing we checked when that problem was reported, and you can use browser tools to inspect the HTML and see that the sizes are there on the <img> tags.

We still have zero machines that can reproduce the problem, and even the OP can't reproduce it anymore.