jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Toolbar minimizes failure

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  JenkeNg 3 years, 7 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Toolbar minimizes failure #102069

    JenkeNg
    Participant

    Hi,Dear jqxWidgets team,
    As the title, when I use the example, if I use “custom” to create the element, and the toolbar is not digested, the display is normal. If you shrink the window and make it smaller, these custom elements will display an exception, I don’t know how to solve it, or can you only specify the button type?

    Toolbar minimizes failure #102078

    Martin
    Participant

    Hello JenkeNg,

    Can you clarify your issue?
    What custom elements do you create? What is the exception you get?
    Can you provide a simple example where this behavior can observed?
    Thank you!

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Toolbar minimizes failure #102081

    JenkeNg
    Participant

    This is an official code example (At the end of the first line)

    $(“#jqxToolBar”).jqxToolBar({ width: “50%”, height: 35, tools: ‘button button button | toggleButton | dropdownlist combobox | custom’,
    initTools: function (type, index, tool, menuToolIninitialization) {
    if (type == “button”) {
    var icon = $(“<div class=’jqx-editor-toolbar-icon jqx-editor-toolbar-icon-” + theme + ” buttonIcon’></div>”);
    }
    switch (index) {
    case 0:
    icon.addClass(“jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-” + theme);
    icon.attr(“title”, “Bold”);
    tool.append(icon);
    break;
    case 1:
    icon.addClass(“jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-” + theme);
    icon.attr(“title”, “Italic”);
    tool.append(icon);
    break;
    case 2:
    icon.addClass(“jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-” + theme);
    icon.attr(“title”, “Underline”);
    tool.append(icon);
    break;
    case 3:
    tool.jqxToggleButton({ width: 80, toggled: true });
    tool.text(“Enabled”);
    tool.on(“click”, function () {
    var toggled = tool.jqxToggleButton(“toggled”);
    if (toggled) {
    tool.text(“Enabled”);
    } else {
    tool.text(“Disabled”);
    }
    });
    break;
    case 4:
    tool.jqxDropDownList({ width: 130, source: [“<span style=’font-family: Courier New;’>Courier New</span>”, “<span style=’font-family: Times New Roman;’>Times New Roman</span>”, “<span style=’font-family: Verdana;’>Verdana</span>”], selectedIndex: 1 });
    break;
    case 5:
    tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
    break;
    case 6:
    var button = ‘<button id=”uploadbtn” type=”button” style=”cursor: pointer;”></button>’;
    tool.append(button);
    $(‘#uploadbtn’).jqxButton({width:25,height:25,imgSrc: “../../script/css/iconfont/upload.png”});
    }
    }
    });

    I changed the last “tools” to “custom”, initialized the toolbar, and then reduced the window, the element will appear abnormal, I don’t know how to express it, you can try it yourself.

    Toolbar minimizes failure #102094

    Martin
    Participant

    Hello JenkeNg,

    Use the following code for initializing the button:

    case 6:
        var button = $("<div>" + "<img src='../../script/css/iconfont/upload.png'/>" + "</div>");
        tool.append(button);
        button.jqxButton({ width: 25, height: 25 });
    }

    Here is an Example.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Toolbar minimizes failure #102109

    JenkeNg
    Participant

    Thank you Martin,
    I used your method to solve this problem. This is just a simple question. In fact, what I want to solve is the component of “dropdowntree” generated by “custom”. What should I do? ?

    Toolbar minimizes failure #102110

    JenkeNg
    Participant

    Also, if this element is a “custom” “<form></form>” tag, what should I do?

    Toolbar minimizes failure #102115

    Martin
    Participant

    Hello JenkeNg,

    Here is an Example that shows how to add a custom element – jqxDropDownButton that contains jqxFrom.

    You can use the same approach, for adding jqxTree or another widget that you need.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Toolbar minimizes failure #102133

    JenkeNg
    Participant

    Martin,Thank you very much.The example you gave is exactly what I need.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.