jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › Jqxinput Image button not displayed
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 9 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hi,
I am having a problem with the display of the search button image along with the jqxinput.
It works ok, if i copy the code from demo. But If i put the same code inside the li of jqxmenu, it does not work.
Image goes to the next line. Please suggest.
Thanks,
Srivalli.Hello Srivalli,
We experience no such issue. Here is an example. Please try it out with the latest version of jQWidgets (3.4.0):
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // Create a jqxMenu $("#jqxMenu").jqxMenu({ width: '670', height: '30px' }); $("#input").jqxInput({ placeHolder: "Enter a Country", height: 23, width: 250, minLength: 1 }); $("#jqxMenu").css('visibility', 'visible'); $("#disabled").jqxCheckBox({ width: '150px', height: '20px' }); $("#open").jqxCheckBox({ width: '150px', height: '20px' }); $("#hover").jqxCheckBox({ width: '150px', height: '20px' }); $("#topLevelArrows").jqxCheckBox({ width: '200px', height: '20px' }); $("#animation").jqxCheckBox({ width: '150px', height: '20px' }); $("#animation").on('change', function (event) { var value = event.args.checked; // enable or disable the menu's animation. if (!value) { $("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 }); } else { $("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 }); } }); $("#disabled").on('change', function (event) { var value = event.args.checked; // enable or disable the menu if (!value) { $("#jqxMenu").jqxMenu({ disabled: false }); } else { $("#jqxMenu").jqxMenu({ disabled: true }); } }); $("#hover").on('change', function (event) { var value = event.args.checked; // enable or disable the menu's hover effect. if (!value) { $("#jqxMenu").jqxMenu({ enableHover: false }); } else { $("#jqxMenu").jqxMenu({ enableHover: true }); } }); $("#open").on('change', function (event) { var value = event.args.checked; // enable or disable the opening of the top level menu items when the user hovers them. if (!value) { $("#jqxMenu").jqxMenu({ autoOpen: false }); } else { $("#jqxMenu").jqxMenu({ autoOpen: true }); } }); $("#topLevelArrows").on('change', function (event) { var value = event.args.checked; // enable or disable the opening of the top level menu items when the user hovers them. if (!value) { $("#jqxMenu").jqxMenu({ showTopLevelArrows: false }); } else { $("#jqxMenu").jqxMenu({ showTopLevelArrows: true }); } }); }); </script> <div id='jqxWidget' style='height: 300px;'> <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'> <ul> <li><a href="#Home">Home</a></li> <li>Solutions <ul style='width: 250px;'> <li><a href="#Education">Education</a></li> <li><a href="#Financial">Financial services</a></li> <li><a href="#Government">Government</a></li> <li><a href="#Manufacturing">Manufacturing</a></li> <li type='separator'></li> <li>Software Solutions <ul style='width: 220px;'> <li><a href="#ConsumerPhoto">Consumer photo and video</a></li> <li><a href="#Mobile">Mobile</a></li> <li><a href="#RIA">Rich Internet applications</a></li> <li><a href="#TechnicalCommunication">Technical communication</a></li> <li><a href="#Training">Training and eLearning</a></li> <li><a href="#WebConferencing">Web conferencing</a></li> </ul> </li> <li><a href="#">All industries and solutions</a></li> </ul> </li> <li>Products <ul> <li><a href="#PCProducts">PC products</a></li> <li><a href="#MobileProducts">Mobile products</a></li> <li><a href="#AllProducts">All products</a></li> </ul> </li> <li>Support <ul style='width: 200px;'> <li><a href="#SupportHome">Support home</a></li> <li><a href="#CustomerService">Customer Service</a></li> <li><a href="#KB">Knowledge base</a></li> <li><a href="#Books">Books</a></li> <li><a href="#Training">Training and certification</a></li> <li><a href="#SupportPrograms">Support programs</a></li> <li><a href="#Forums">Forums</a></li> <li><a href="#Documentation">Documentation</a></li> <li><a href="#Updates">Updates</a></li> </ul> </li> <li>Communities <ul style='width: 200px;'> <li><a href="#Designers">Designers</a></li> <li><a href="#Developers">Developers</a></li> <li><a href="#Educators">Educators and students</a></li> <li><a href="#Partners">Partners</a></li> <li type='separator'></li> <li>By resource <ul> <li><a href="#Labs">Labs</a></li> <li><a href="#TV">TV</a></li> <li><a href="#Forums">Forums</a></li> <li><a href="#Exchange">Exchange</a></li> <li><a href="#Blogs">Blogs</a></li> <li><a href="#Experience Design">Experience Design</a></li> </ul> </li> </ul> </li> <li> <div id="input"> <input type="text" /> <div id="search"> <img alt="search" width="16" height="16" src="../../images/search_lg.png" /></div> </div> </li> </ul> </div> <br /> <div style='margin-left: 60px; margin-top: 120px;'> <div style='font-size: 16px; font-family: Verdana Arial;'> Settings </div> <div style='margin-top: 20px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='animation' checked='checked'> Enable Animation</div> <div style='margin-top: 20px;' id='disabled'> Disabled</div> </div> <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='hover' checked='checked'> Enable Hover</div> <div style='margin-top: 20px;' id='open' checked='checked'> Auto Open</div> </div> <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='topLevelArrows'> Show Top-Level Arrows</div> </div> </div> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.