Announcement

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

    ToolStripMenuButton with image initial render problem

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

    Code:
    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.

    Click image for larger version

Name:	ToolStripMenuButton issue.png
Views:	160
Size:	37.3 KB
ID:	245113


    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.
    Last edited by kylemwhite; 15 Jun 2017, 13:27.

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

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

    Comment


      #3
      Yup. that works. Thanks.

      Comment


        #4
        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?

        Comment


          #5
          Thanks, we just exposed it.

          Comment

          Working...
          X