Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Tab Width Problem With Icon

    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.

    Click image for larger version

Name:	tab_no_spacing.png
Views:	99
Size:	961 Bytes
ID:	267367

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

    Click image for larger version

Name:	tab_spacing.png
Views:	78
Size:	854 Bytes
ID:	267368

    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

    Code:
    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);
        }
    }

    #2
    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.

    Comment


      #3
      Thank you, I will give that a try.

      Comment


        #4
        Looks good. Thanks again.

        Comment


          #5
          Excellent, glad to hear that was the cause!

          Comment


            #6
            Hi Isomorphic,

            might this be the reason here as well?

            Best regards
            Blama

            Comment


              #7
              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.

              Comment

              Working...
              X