Toolbar minimizes failure

[JenkeNgParticipant]

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?

[MartinParticipant]

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/

[JenkeNgParticipant]

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.

[MartinParticipant]

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/

[JenkeNgParticipant]

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

[JenkeNgParticipant]

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

[MartinParticipant]

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/

[JenkeNgParticipant]

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

[Author]

Posts