ToolStripMenuButton with image initial render problem

[kylemwhite]

Using: v11.1d_2017-06-15
Skin: Enterprise

When I create a ToolStripMenuButton with an icon, often times (not always) it renders incorrectly at first. Once I hover the mouse over it, it corrects itself. To demonstrate, I've modified the code from this sample:
http://www.smartclient.com/smartclie...crease=0&dhc=1

I modified the code so that the File ToolStripMenuButton has an icon and I moved it away from the first position (because it didn't seem to happen as much in the first position).

var menu = isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});

var but = isc.ToolStripMenuButton.create({
    ID: "menuButton",  
    [B]title: isc.Canvas.imgHTML("icons/16/icon_add_files.png") + " File",   [/B]
    menu: menu
});


isc.ToolStripButton.create({
    ID: "printButton",    
    icon: "[SKIN]/RichTextEditor/print.png",
    title: "Print"
    
});
isc.ToolStripButton.create({
    ID: "alignLeft",  
    icon: "[SKIN]/RichTextEditor/text_align_left.png",    
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "alignRight",  
    icon: "[SKIN]/RichTextEditor/text_align_right.png",
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "alignCenter",  
    icon: "[SKIN]/RichTextEditor/text_align_center.png",
    actionType: "radio",
    radioGroup: "textAlign"
});
isc.ToolStripButton.create({
    ID: "bold",
    icon: "[SKIN]/RichTextEditor/text_bold.png",
    actionType: "checkbox",
    showFocused: false
});
isc.ToolStripButton.create({
    ID: "italics",
    icon: "[SKIN]/RichTextEditor/text_italic.png",
    actionType: "checkbox",
    showFocused: false
});
isc.ToolStripButton.create({
    ID: "underlined",
    icon: "[SKIN]/RichTextEditor/text_underline.png",
    actionType: "checkbox",
    showFocused: false
});

isc.DynamicForm.create({
    ID: "fontSelector",
    showResizeBar:true,
    width:120, minWidth:50,
    numCols:1,
    fields: [
        {name: "selectFont", showTitle: false, width:"*",
         valueMap: {
            "courier": "<span style='font-family:courier'>Courier</span>",
            "verdana": "<span style='font-family:verdana'>Verdana</span>",
            "times": "<span style='font-family:times'>Times</span>"
         }, defaultValue:"courier" }
    ]    
});

isc.DynamicForm.create({
    ID: "zoomSelector",
    width:100, minWidth:50,
    numCols:1,
    fields: [
        {name: "selectZoom", showTitle: false, width:"*",
         valueMap: ["50%", "75%", "100%", "150%", "200%", "Fit"],
         defaultValue:"100%" }
    ]
});

isc.ToolStrip.create({
    width: 450, height:24,
    members: [ "separator", printButton,
              "resizer", bold, italics, underlined,
              "separator"[B],menuButton,[/B]
              alignLeft, alignRight, alignCenter,
              "separator",
              fontSelector, "resizer", zoomSelector]
});

In my tests, I initially see the drop-down arrow overlapping with the next control. If I hover over the button, it then fixes itself. The image below illustrates.




Note that it does not happen every time, although it was frequent enough for me to capture these screenshots. I've also tried wrapping a <span> tag around the image and title. That might help sometimes but not all the time.

[Isomorphic]

You just need to pass the width and height parameters in your call to Canvas.ImgHTML(), like:

   ...
   title: isc.Canvas.imgHTML("icons/16/icon_add_files.png", 16, 16) + " File",
   ...

[kylemwhite]

Yup. that works. Thanks.

[kylemwhite]

One more thing on the imgHTML function... according to the docs, this is an instance method but it appears to be a Class method as well (as this examaple shows). Unfortunately, since the Class method is not in the referenceDocs.xml file, it doesn't get generated in the TypeScript library. Can we get that documented?

[Isomorphic]

Thanks, we just exposed it.